"use client";

import { useEffect, useState } from "react";
import AppDrawer from "@/components/UiComponents/drawers/AppDrawer";
import LocalePath from "@/components/UiComponents/LocalePath";
import { useTranslations } from "next-intl";
import {OrdersIcon,OurProductsIcon,ReturnsIcon,StatisticsIcon} from "@/assets/svgs/TraderIcons";
import AuthWrapper from "@/components/sharedComponents/AuthWrapper";
import { QuickLinks } from "@/components/UiComponents/footer/FooterLinks";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/store/store";
import { toggleCategoriesDrawer } from "@/store/general";

interface Props {
  openDrawer: boolean;
  setOpenDrawer: (value: boolean) => void;
  isLoading?:boolean;
}

const MobileNav = ({ openDrawer, setOpenDrawer,isLoading }: Props) => {
  const t = useTranslations();
  const dispatch = useDispatch<AppDispatch>();
  const {categories} = useSelector((state:RootState)=>state.generalConfig);
  
  const traderLinks = [
    {
      label: t("NAV.statistics"),
      href: "/statistics?graph=year",
      icon: <StatisticsIcon />,
    },
    {
      label: t("NAV.myProducts"),
      href: "/my-products",
      icon: <OurProductsIcon />,
    },
    {
      label: t("NAV.receivedOrders"),
      href: "/received-orders",
      icon: <OrdersIcon />,
    },
    { label: t("NAV.returns"), href: "/returns", icon: <ReturnsIcon /> },
  ];

  return (
    <AppDrawer
      title={false}
      footer={false}
      loading={isLoading}
      placement="right"
      open={openDrawer}
      handleClose={() => setOpenDrawer(false)}
      rootClassName="categories-drawer-container"
    >
      <ul className="flex flex-col gap-2 max-h-[80vh] pb-5 overflow-y-auto">
        <LocalePath href="/" className="drawer-category">
          {t("NAV.home")}
        </LocalePath>
        <li
          className="drawer-category"
          onClick={() => dispatch(toggleCategoriesDrawer(true))}
        >
          {t("Text.departments")}
        </li>
        <AuthWrapper allowedRoles={["vendor"]}>
          {traderLinks.map((el, index) => (
            <li key={`trader_link_${index}`} className="drawer-category">
              <LocalePath className="header-link" href={el.href}>
                {/* {el.icon} */}
                {el.label}
              </LocalePath>
            </li>
          ))}
        </AuthWrapper>

        <AuthWrapper allowedRoles={["guest", "client"]}>
          {categories?.map((el:any, index:number) => (
            <li
              key={`category_${index}`}
              className="drawer-category"
              onClick={() => setOpenDrawer(false)}
            >
              <LocalePath className="header-link" href={`/categories/${el.id}`}>
                {el.title}
              </LocalePath>
            </li>
          ))}
        </AuthWrapper>
        {QuickLinks.map((el: any, index: number) => {
          return (
            <li key={`category_${index}`} className="drawer-category">
              <LocalePath className="header-link" href={el.path}>
                {t(`FOOTER.QuickLinks.${el.name}`)}
              </LocalePath>
            </li>
          );
        })}
      </ul>
    </AppDrawer>
  );
};

export default MobileNav;