"use client";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";
import { useLocale, useTranslations } from "next-intl";
import Link from "next/link";
import { FaBars } from "react-icons/fa";
import { IoIosArrowBack, IoIosArrowDown, IoIosArrowForward } from "react-icons/io";

import fetchData from "@/api/fetch-data";
import FallbackImage from "@/app/ui/shared/FallbackImage";
import { Separator } from "@radix-ui/react-dropdown-menu";
import { useEffect, useState } from "react";
export default function StyleFiveCategoriesMenu({ img }) {
  const locale = useLocale();
  const [showDropdown, setShowDropdown] = useState(false);
  const [categories, setCategories] = useState([]);
  const t = useTranslations("navbar");

  useEffect(() => {
    async function getCategories() {
      const response = await fetchData({ endPoint: "/categories", locale });
      if (response?.status == "success") {
        setCategories(response?.data || []);
      }
    }
    getCategories();
  }, [locale]);

  return (
    <div>
      <DropdownMenu
        open={showDropdown}
        onOpenChange={setShowDropdown}
        modal={false}
      >
        <DropdownMenuTrigger className="lg:w-48 flex items-center gap-3  text-lg font-bold hover:text-main cursor-pointer ">
          <FaBars size={18} />
          {t("categories")}
          <IoIosArrowDown className=" ms-auto" />
        </DropdownMenuTrigger>
        {categories?.length == 0 ? (
          <DropdownMenuContent className="w-48  rounded-none  p-4 ">
            <p className="text-center">{t("no-sections")}</p>
          </DropdownMenuContent>
        ) : (
          <DropdownMenuContent className="w-48  rounded-none px-0   max-md:max-h-64 max-md:overflow-y-auto ">
            {categories?.slice(0, 4)?.map((item, index) => (
              <HoverCard key={index} openDelay={100} closeDelay={100}>
                <HoverCardTrigger onClick={() => setShowDropdown(false)}>
                  <Link
                    href={`/products/filter/${item.id}`}
                    className="group  flex p-2 py-3 items-center gap-1  hover:text-main text-sm cursor-pointer"
                    dir={locale == "en" ? "ltr" : "rtl"}
                  >
                    <FallbackImage
                      src={item.cover_image || img}
                      alt={item.title}
                      width={18}
                      height={18}
                      className="me-auto"
                    />
                    <p className="text-base line-clamp-1">{item.title}</p>
                    {locale == "en" ? (
                      <IoIosArrowForward className="duration-500 group-hover:rotate-90 hover:text-main" />
                    ) : (
                      <IoIosArrowBack className="duration-500 group-hover:-rotate-90 hover:text-main" />
                    )}
                  </Link>
                  <Separator className="h-[1px] w-full bg-gray-400" />
                </HoverCardTrigger>
                <HoverCardContent
                  className={`p-0 lg:absolute ${locale == "ar" ? "lg:end-[100px]" : "lg:start-[100px]"
                    } -top-7 rounded-none`}
                >
                  {item.sub_categories?.length == 0 ? (
                    <p className="text-center">{t("no-sections")}</p>
                  ) : (
                    <ul
                      dir={locale == "en" ? "ltr" : "rtl"}
                    >
                      {item?.sub_categories?.map((item, index) => (
                        <div key={index}>
                          <li
                            onClick={() => setShowDropdown(false)}
                            className="flex p-2 py-3 items-center"
                          >
                            <Link
                              href={`/products/filter/${item.id}`}
                              className=" hover:text-main"
                            >
                              {item.title}
                            </Link>
                            <FallbackImage
                              priority={true}
                              src={item.cover_image || img}
                              alt={item.title}
                              width={18}
                              height={18}
                              className="ms-auto"
                            />
                          </li>
                          <Separator className="h-[1px] w-full bg-gray-400" />
                        </div>

                      ))}
                    </ul>
                  )}
                </HoverCardContent>
              </HoverCard>
            ))}
            <div className="w-fit hover:text-main m-auto ">
              <Link
                href={"/categories"}
                onClick={() => setShowDropdown(false)}
                className=" flex gap-1  py-2 group items-center justify-center"
              >
                {t("allcategories")}
              </Link>
            </div>
          </DropdownMenuContent>
        )}
      </DropdownMenu>
    </div>
  );
}