"use client";
import Image from "next/image";
import close from "../../../public/assets/icons/close1.svg";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { ChangeEvent } from "react";
import { useTranslations } from "next-intl";

const OverLay = ({
  open,
  setOpen,
  locale,
}: {
  open: boolean;
  setOpen: (open: boolean) => void;
  locale: string;
}) => {
  const t = useTranslations("OverLay");

  // TODO: get categories from api and set ids here
  const links = [
    { id: 1, title: "Home", path: `/${locale}` },
    {
      id: 2,
      title: "Ready to Move",
      path: `/${locale}/1/filter?category_id=1`,
    },
    { id: 3, title: "Off Plan", path: `/${locale}/2/filter?category_id=2` },
    { id: 4, title: "Best Deals", path: `/${locale}/3/filter?category_id=3` },
    { id: 5, title: "Developers", path: `/${locale}/developers` },
    { id: 6, title: "About Us", path: `/${locale}/about-us` },
  ];
  const pathnames = usePathname();
  const currentPage = "/" + pathnames.split("/").slice(2).join("/");
  const router = useRouter();

  const handleLangChange = (e: ChangeEvent<HTMLSelectElement>) => {
    const newLocale = e.target.value as string;
    const pathname = pathnames.split("/").slice(2).join("/");

    router.push(`/${newLocale}/${pathname}`);
  };
  return (
    <>
      <div
        className={`fixed inset-0 z-[1000] bg-black/50 transition-opacity duration-500 ${
          open ? "opacity-100" : "opacity-0 pointer-events-none"
        }`}
        onClick={() => setOpen(false)}
      >
        <div
          onClick={(e) => e.stopPropagation()}
          className={`fixed top-0 ${
            locale === "ar" ? "left-0" : "right-0"
          } h-full w-[300px] md:w-[400px] z-[9999] bg-white transform transition-transform duration-700 ease-in-out ${
            open
              ? "translate-x-0"
              : locale === "ar"
              ? "-translate-x-full"
              : "translate-x-full"
          }`}
        >
          <div className="w-[300px] md:w-[400px] h-full bg-white flex flex-col p-4  gap-8">
            <div className="flex justify-between items-center">
              <span className="text-black text-[18px] font-normal">
                {t("Menu")}
              </span>
              <div
                className="bg-white cursor-pointer"
                onClick={() => setOpen(false)}
              >
                <Image src={close} alt="close" />
              </div>
            </div>
            <div className="flex flex-col gap-4">
              {links.map((item, i) => {
                const isActive = item.path === currentPage;
                return (
                  <div
                    key={item.id}
                    className={`flex flex-col gap-4 transform transition-all duration-500 ease-out ${
                      open
                        ? "translate-x-0 opacity-100"
                        : locale === "ar"
                        ? "-translate-x-10 opacity-0"
                        : "translate-x-10 opacity-0"
                    }`}
                    style={{ transitionDelay: `${i * 100 + 300}ms` }}
                  >
                    <Link
                      href={item.path}
                      className={` text-[18px] font-extralight rtl:before:ml-[7px] hover:text-primary hover:scale-[1.03] transition-all duration-500 ${
                        isActive
                          ? "text-primary font-light before:content-['•'] before:mr-[7px]     "
                          : "text-dark"
                      } ${open ? "-translate-x-0" : "translate-x-full"} `}
                    >
                      {t(item.title)}
                    </Link>
                    <div className="border-b border-light-stroke"></div>
                  </div>
                );
              })}
              <select
                value={locale}
                onChange={handleLangChange}
                className="text-[18px] font-extralight text-dark appearance-none p-2 cursor-pointer"
              >
                <option value="en" className="text-[18px] font-extralight">
                  EN
                </option>
                <option value="ar" className="text-[18px] font-extralight">
                  AR
                </option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default OverLay;