import { LINKS } from "@/shared/variables/links";
import { Link, usePathname } from "@/shared/config/navigation";
import { useEffect, useState, useTransition } from "react";
import { useParams, useRouter } from "next/navigation";
import chevron_down from "./icons/chevron_down.svg";
import Image from "next/image";
import NavAuth from "../NavAuth/NavAuth";

interface INavMenuProps {
  setOpenMenu: (boolean: boolean) => void;
}

const NavMenu: React.FC<INavMenuProps> = ({ setOpenMenu }: INavMenuProps) => {
  const [openMenuLanguage, setOpenMenuLanguage] = useState<boolean>(false);
  const router = useRouter();
  const pathname = usePathname();
  const { locale } = useParams();

  const [_, startTransition] = useTransition();
  const [currentLanguage, setCurrentLanguage] = useState<string>(
    locale as string
  );

  useEffect(() => {
    const params = window.location.search || "";
    startTransition(() => {
      router.replace(`/${currentLanguage}${pathname}${params}`, {
        scroll: false,
      });
    });
  }, [currentLanguage]);

  const langKeys: Record<string, string> = {
    ru: "Русский",
    kg: "Кыргызча",
    en: "English",
  };

  const languages = [
    { id: 1, language: "Русский", pathname: "ru" as const },
    { id: 2, language: "Кыргызча", pathname: "kg" as const },
    { id: 3, language: "English", pathname: "en" as const },
  ];

  return (
    <nav className="p-[48px] w-full h-full min-h-[600px] fixed left-0 top-[120px] flex flex-col gap-6 bg-white scroll inset-y-0 right-0 z-50 overflow-y-auto">
      {/* <div className="flex items-center justify-between">
        <Link className="-m-1.5 p-1.5" href={"/"}>
          <Image src={logo} alt="Logo" className="h-8 w-auto" />
        </Link>
        <button
          onClick={() => setOpenMenu(false)}
          className="-m-2.5 rounded-md p-2.5 text-gray-700"
        >
          <Image src={cross} alt="cross" />
        </button>
      </div> */}
      {LINKS().map((link) => (
        <Link
          onClick={() => setOpenMenu(false)}
          className={`justify-start font-medium size-6${
            pathname === link.pathname ? "text-light-blue" : ""
          }`}
          href={`${pathname.slice(1, 3)}/${link.pathname}`}
          key={link.id}
        >
          {link.pagename}
        </Link>
      ))}

      <NavAuth setOpenMenu={setOpenMenu} responsible />

      <div>
        <button
          onClick={() => setOpenMenuLanguage((prev) => !prev)}
          className="mb-5 flex items-center gap-1 text-[#66727f]"
        >
          {langKeys[currentLanguage as string]}
          <Image
            className="w-[18px] h-[18px]"
            src={chevron_down}
            alt="Chevron Down"
          />
        </button>

        {openMenuLanguage && (
          <div className="flex flex-col gap-[10px]">
            {languages.map((lang) => (
              <Link
                onClick={() => setCurrentLanguage(lang.pathname)}
                className={`${
                  currentLanguage === lang.pathname
                    ? "text-black font-bold"
                    : "text-[#66727f]"
                }`}
                href="#"
                locale={lang.pathname}
                key={lang.id}
              >
                {lang.language}
              </Link>
            ))}
          </div>
        )}
      </div>
    </nav>
  );
};

export default NavMenu;
