"use client";
import React, { useEffect, useState } from "react";
import AppDrawer from "../drawers/AppDrawer";
import { useLocale, useTranslations } from "next-intl";
import { usePathname } from "next/navigation";
import useAccountLinks from "./useAccountLinks";
import LocalePath from "../LocalePath";
import { MdKeyboardArrowRight } from "react-icons/md";
import { Person, RS } from "@/shared/Icons";
import { NavItems } from "./NavbarLinks";
import LangSwitcher from "../lang/LangSwitcher";
import clsx from "clsx";
import LogoutButton from "@/components/profile/LogoutButton";
import { HiMenuAlt2 } from "react-icons/hi";
import { cleanPath } from "@/utils/helpers";
import { CategoriesProps, SessionType } from "@/interfaces/types";
import MediaWithFallback from "../MediaWithFallback";

export default function NavItemsDrawer({
  session,
  categories,
}: {
  session: SessionType | null;
  categories: CategoriesProps[];
}) {
  const t = useTranslations();
  const [isOpen, setOpen] = useState<boolean>(false);
  const [isOpenNav, setOpenNav] = useState<boolean>(false);
  const router = usePathname();

  const locale = useLocale();
  const { accountMenuItems } = useAccountLinks();
  const cleanedPathname = cleanPath({ path: router });

  return (
    <>
      <button
        className={` text-primary-dark lg:text-3xl text-lg lg:font-semibold font-medium cursor-pointer`}
        onClick={() => setOpen(true)}
      >
        <HiMenuAlt2 size={35} />
      </button>
      <AppDrawer
        placement="right"
        open={isOpen}
        handleClose={() => setOpen(false)}
        title={
          <div
            className={`asbsolute top-0 start-0  w-full p-5 ${
              session ? "py-4" : "py-8"
            } z-[1] bg-primary-light`}
          >
            {session ? (
              <div className="grid grid-cols-[auto_1fr] items-center gap-5 bg-transparent">
                <MediaWithFallback
                  src={session?.image}
                  alt="profile-image"
                  width={500}
                  height={500}
                  className="size-6 object-cover rounded-full"
                />
                <div className="flex lg:gap-x-24 gap-x-12 items-center">
                  <div className="flex flex-col gap-3 md:text-base text-sm md:font-semibold font-medium">
                    <span className=" text-primary">
                      {t("Text.welcomeback")}
                    </span>
                    <span className=" text-primary-dark">{session?.name}</span>
                  </div>
                  <button onClick={() => setOpenNav(true)} className="w-fit">
                    <MdKeyboardArrowRight
                      size={35}
                      className={`${
                        locale == "ar" ? "rotate-180" : ""
                      } text-primary cursor-pointer`}
                    />
                  </button>
                </div>
              </div>
            ) : (
              <div className="grid grid-cols-[auto_1fr] items-center gap-5 bg-transparent">
                <Person className="size-6 *:fill-primary" />
                <LocalePath
                  onClick={() => setOpen(false)}
                  href="/auth/login"
                  className="w-fit"
                >
                  <span className=" text-primary text-sm md:text-base md:font-semibold font-medium">
                    {t("NAV.login")}
                  </span>
                </LocalePath>
              </div>
            )}
          </div>
        }
        loading={false}
        rootClassName="header-mobile-drawer"
      >
        <div className="flex  gap-5 flex-col px-4">
          <LocalePath
            onClick={() => setOpen(false)}
            className={`${
              cleanPath({ path: `${locale == "ar" ? "" : "/en"}/` }) ==
              cleanedPathname
                ? "!text-primary md:!font-semibold !font-medium"
                : "!text-[#3C4143] !font-medium "
            } md:!text-lg !text-base w-fit hover:!text-primary !cursor-pointer !leading-5 !text-start`}
            href={`/`}
            key={`header_link_1`}
          >
            {t(`NAV.home`)}
          </LocalePath>
          {categories?.map((el, index) => (
            <LocalePath
              onClick={() => setOpen(false)}
              className={`${
                cleanPath({
                  path: window.location.href.split(window.location.origin)[1],
                  keepSearchParams: true,
                }) ==
                cleanPath({
                  path: `${locale == "ar" ? "" : "/en"}/products?category_id=${el.id}`,
                  keepSearchParams: true,
                })
                  ? "!text-primary md:!font-semibold !font-medium"
                  : "!text-[#3C4143] !font-medium "
              } md:!text-lg !text-base w-fit hover:!text-primary !cursor-pointer !leading-5 !text-start`}
              href={`/products?category_id=${el.id}`}
              key={`header_link_${index + 1}`}
            >
              {el?.name}
            </LocalePath>
          ))}
          <LocalePath
            onClick={() => setOpen(false)}
            className={`${
              cleanedPathname ==
              cleanPath({
                path: `${locale == "ar" ? "" : "/en"}/subscriptions`,
              })
                ? "!text-primary md:!font-semibold !font-medium"
                : "!text-[#3C4143] !font-medium "
            } md:!text-lg !text-base w-fit hover:!text-primary !cursor-pointer !leading-5 !text-start`}
            href={`/subscriptions`}
            key={`header_link_5`}
          >
            {t(`NAV.weekly_subscriptions`)}
          </LocalePath>
        </div>
        <div className=" ms-4 mt-5">
          <LangSwitcher />
        </div>
      </AppDrawer>
      <AppDrawer
        placement="right"
        open={isOpenNav}
        handleClose={() => setOpenNav(false)}
        closable={false}
        title={
          <div className={`w-full p-5 py-6 z-[1] bg-[#ddd]`}>
            <div className="flex items-center gap-x-4">
              <button onClick={() => setOpenNav(false)} className="w-fit">
                <MdKeyboardArrowRight
                  size={35}
                  className={`${
                    locale == "ar" ? "-rotate-180" : ""
                  } text-primary-dark cursor-pointer`}
                />
              </button>
              <span className=" text-primary-dark">{t("NAV.profile")}</span>
            </div>
          </div>
        }
        loading={false}
        rootClassName="header-mobile-drawer"
      >
        <ul>
          {accountMenuItems.map((item, ind: number) => {
            const isActive =
              cleanPath({
                path: `${locale == "ar" ? "" : "/en"}${item.path}`,
              }) === cleanedPathname || router.includes(item.path);
            return (
              <li key={ind}>
                <LocalePath
                  href={item.path}
                  scroll={!isActive}
                  onClick={() => {
                    setOpenNav(false);
                    setOpen(false);
                  }}
                  className={clsx(
                    "flex gap-3 items-center px-3 lg:mb-3 mb-1 text-base py-4 font-medium",
                    {
                      "bg-primary-light text-primary rounded-xl p-2": isActive,
                    },
                    {
                      "flex items-center justify-between":
                        item.path.includes("wallet"),
                    },
                  )}
                >
                  <div className="flex gap-3 items-center">
                    <span className="w-6 h-6 min-w-6 min-h-6 rounded-full flex items-center justify-center">
                      {isActive ? item.activeIcon : item.icon}
                    </span>
                    <span
                      className={clsx("text-base font-medium", {
                        "text-primary": isActive,
                        "text-[#3C4143]": !isActive,
                      })}
                    >
                      {item.name}
                    </span>
                  </div>
                </LocalePath>
              </li>
            );
          })}
          <div className="flex gap-3 items-center px-3 lg:mb-3 mb-1 text-base py-4 font-medium">
            <LogoutButton />
          </div>
        </ul>
      </AppDrawer>
    </>
  );
}