import { Box } from "iconsax-react";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import { Pages } from "../../config/Pages";
import SubMenuAccordion from "./SubMenuAccordion";
import SubMenuItem from "./SubMenuItem";

const ProductsSubMenu: FC = () => {
  const location = useLocation();
  const { t } = useTranslation("global");

  const isActive = (name: string) => location.pathname.includes(name);

  return (
    <div className="py-12">
      <div className="flex gap-3 items-center border-b pb-10 px-6">
        <Box
          size={24}
          color="#000"
          variant="Bold"
        />
        <div className="text-xs">{t("sidebar.products")}</div>
      </div>

      <div className="flex flex-col mt-10 gap-4">
        <SubMenuAccordion
          title={t("sidebar.dmenu")}
          isActive={isActive("dmenu")}
          activeName="dmenu"
        >
          <SubMenuItem
            title={t("sidebar.icons")}
            isActive={isActive("dmenu/icons/list") && !isActive("group")}
            link={Pages.dmenu.icons.list}
            activeName="dmenu"
          />
          <SubMenuItem
            title={t("sidebar.groups_icon")}
            isActive={isActive("dmenu/icons/group")}
            link={Pages.dmenu.icons.groupList}
            activeName="dmenu"
          />
          <SubMenuItem
            title={t("sidebar.reports")}
            isActive={isActive("dmenu/reports")}
            link={Pages.dmenu.warnings.list}
            activeName="dmenu"
          />
          <SubMenuItem
            title={t("sidebar.restaurants")}
            isActive={isActive("restaurants")}
            link={Pages.dmenu.restaurants.list}
            activeName="dmenu"
          />
          <SubMenuItem
            title={t("sidebar.sms_count")}
            isActive={isActive("dmenu/sms-count")}
            link={Pages.dmenu.restaurants.smsCountList}
            activeName="dmenu"
          />
        </SubMenuAccordion>

        <SubMenuAccordion
          title={t("sidebar.dkala")}
          isActive={isActive("dkala")}
          activeName="dkala"
        >
          <SubMenuItem
            title={t("sidebar.icons")}
            isActive={isActive("dkala/icons/list") && !isActive("group")}
            link={Pages.dkala.icons.list}
            activeName="dkala"
          />
          <SubMenuItem
            title={t("sidebar.groups_icon")}
            isActive={isActive("dkala/icons/group")}
            link={Pages.dkala.icons.groupList}
            activeName="dkala"
          />
          <SubMenuItem
            title={t("sidebar.reports")}
            isActive={isActive("dkala/reports")}
            link={Pages.dkala.warnings.list}
            activeName="dkala"
          />
          <SubMenuItem
            title={t("sidebar.shops")}
            isActive={isActive("dkala/shops")}
            link={Pages.dkala.shops.list}
            activeName="dkala"
          />
          <SubMenuItem
            title={t("sidebar.sms_count")}
            isActive={isActive("dkala/sms-count")}
            link={Pages.dkala.shops.smsCountList}
            activeName="dkala"
          />
        </SubMenuAccordion>

        <SubMenuAccordion
          title={t("sidebar.dmail")}
          isActive={isActive("dmail")}
          activeName="dmail"
        >
          <SubMenuItem
            title={t("sidebar.domain")}
            isActive={isActive("dmail/domain/list")}
            link={Pages.dmail.list}
            activeName="dmail"
          />
        </SubMenuAccordion>

        <SubMenuAccordion
          title={t("sidebar.dpage")}
          isActive={isActive("dpage")}
          activeName="dpage"
        >
          <SubMenuItem
            title={t("sidebar.sticker")}
            isActive={isActive("dpage/stickers/list")}
            link={Pages.dpage.stickers.list}
            activeName="dpage"
          />
        </SubMenuAccordion>
      </div>
    </div>
  );
};

export default ProductsSubMenu;
