"use client";

import { useEffect, useState } from "react";

interface Props {
  show: boolean;
  onClose: () => void;
  selectedLanguages: string[];
  onSave: (languages: string[]) => void;
}

const languages = [
  "English",
  "Hindi",
  "Assamese",
  "Bengali",
  "Bodo",
  "French",
  "German",
  "Gujarati",
  "Kannada",
  "Kashmiri",
  "Konkani",
  "Maithili",
  "Malayalam",
  "Manipuri",
  "Marathi",
  "Marwari",
  "Nepali",
  "Odia",
  "Punjabi",
  "Sanskrit",
  "Sindhi",
  "Spanish",
  "Tamil",
  "Telugu",
  "Urdu",
];

export default function EditLanguageModal({
  show,
  onClose,
  selectedLanguages,
  onSave,
}: Props) {
  const [selected, setSelected] = useState<string[]>([]);

  useEffect(() => {
    if (show) {
      setSelected(selectedLanguages);
    }
  }, [show, selectedLanguages]);

  const toggleLanguage = (language: string) => {
    if (selected.includes(language)) {
      setSelected(selected.filter((item) => item !== language));
    } else {
      setSelected([...selected, language]);
    }
  };

  const handleSave = () => {
    onSave(selected);
    onClose();
  };

  if (!show) return null;

  return (
    <div
      className="modal fade show d-block"
      style={{ background: "rgba(0,0,0,.6)" }}
    >
      <div className="modal-dialog modal-lg modal-dialog-centered">
        <div className="modal-content border-0 rounded-4 overflow-hidden">

          <div className="modal-header bg-warning justify-content-center position-relative">
            <h5 className="fw-bold m-0">
              Select Languages You Know
            </h5>

            <button
              className="btn-close position-absolute end-0 me-3"
              onClick={onClose}
            />
          </div>

          <div
            className="modal-body px-4 py-3"
            style={{
              maxHeight: "500px",
              overflowY: "auto",
            }}
          >
            <div className="row g-3">

              {languages.map((language) => (
                <div
                  key={language}
                  className="col-md-3 col-6"
                >
                  <button
                    type="button"
                    onClick={() => toggleLanguage(language)}
                    className={`btn w-100 rounded-pill fw-semibold language-btn ${
                      selected.includes(language)
                        ? "btn-warning text-dark"
                        : "btn-primary"
                    }`}
                  >
                    {language}

                    {selected.includes(language)
                      ? " ✓"
                      : " +"}
                  </button>
                </div>
              ))}

            </div>
          </div>

          <div className="modal-footer border-top justify-content-end">

            <button
              className="btn btn-warning rounded-pill px-5"
              onClick={handleSave}
            >
              Done
            </button>

          </div>

        </div>
      </div>
    </div>
  );
}