import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import ukFlag from "../../assets/uk-flag.svg";
import deFlag from "../../assets/de-flag.svg";
import arFlag from "../../assets/syriaflag.svg";
import frFlag from "../../assets/france-flag-icon.svg";
import itFlag from "../../assets/italy-flag-icon.svg";
import cnFlag from "../../assets/china-flag-icon.svg";

const LanguageSwitcher = () => {
  const { i18n } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);

  const languages = [
    { code: "en", name: "English", flag: ukFlag },
    { code: "ar", name: "العربية", flag: arFlag },
    { code: "de", name: "Deutsch", flag: deFlag },
    { code: "zh", name: "中文", flag: cnFlag },
    { code: "fr", name: "Français", flag: frFlag },
    { code: "it", name: "Italiano", flag: itFlag },
  ];

  const currentLanguage =
    languages.find((lang) => lang.code === i18n.language) || languages[0];

  const changeLanguage = (langCode) => {
    i18n.changeLanguage(langCode);
    setIsOpen(false);

    if (langCode === "ar") {
      document.documentElement.dir = "rtl";
      document.documentElement.lang = "ar";
    } else {
      document.documentElement.dir = "ltr";
      document.documentElement.lang = langCode;
    }
  };

  const menuPosition =
    document.documentElement.dir === "rtl" ? "left-0" : "right-0"; // toggle position based on dir

  return (
    <div className="relative inline-block text-left">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="inline-flex items-center font-bold text-lg px-3 py-2 text-white rounded-lg cursor-pointer hover:bg-gray-100/10 dark:hover:bg-gray-700 transition"
      >
        <img
          src={currentLanguage.flag}
          alt={currentLanguage.name}
          className="w-10 h-6"
        />
        <span className="hidden sm:inline ms-2">{currentLanguage.name}</span>
      </button>

      {isOpen && (
        <div
          className={`absolute top-12 ${menuPosition} z-50 w-44 bg-white dark:bg-gray-700 divide-y divide-gray-100 dark:divide-gray-600 rounded-lg shadow`}
        >
          <ul className="py-2">
            {languages.map((language) => (
              <li key={language.code}>
                <button
                  onClick={() => changeLanguage(language.code)}
                  className={`w-full text-left block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 flex items-center gap-3 ${
                    currentLanguage.code === language.code
                      ? "bg-gray-50 text-blue-600 dark:bg-gray-600"
                      : "text-gray-800 dark:text-white"
                  }`}
                >
                  <img
                    src={language.flag}
                    alt={language.name}
                    className="w-10 h-6"
                  />
                  <span>{language.name}</span>
                </button>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default LanguageSwitcher;
