import { Category } 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 OtherSubMenu: 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">
        <Category
          size={24}
          color="#000"
          variant="Bold"
        />
        <div className="text-xs">{t("sidebar.other")}</div>
      </div>

      <div className="flex flex-col mt-10 gap-4">
        <SubMenuItem
          title={t("sidebar.feedback")}
          isActive={isActive("feedback")}
          link={Pages.feedback.list}
          activeName="services"
        />

        <SubMenuAccordion
          title={t("sidebar.accessLogs")}
          isActive={isActive("access-logs")}
          activeName="logs"
        >
          <SubMenuItem
            title={t("submenu.access_logs_list")}
            isActive={isActive("access-logs/list")}
            link={Pages.accessLogs.list}
          />
          <SubMenuItem
            title={t("submenu.access_logs_stats")}
            isActive={isActive("access-logs/stats")}
            link={Pages.accessLogs.stats}
          />
          <SubMenuItem
            title={t("submenu.access_logs_errors")}
            isActive={isActive("access-logs/errors")}
            link={Pages.accessLogs.errors}
          />
          <SubMenuItem
            title={t("submenu.access_logs_permissions")}
            isActive={isActive("access-logs/permissions")}
            link={Pages.accessLogs.permissions}
          />
        </SubMenuAccordion>

        <SubMenuItem
          title={t("sidebar.criticisms")}
          isActive={isActive("criticisms")}
          link={Pages.criticisms.list}
          activeName="criticisms"
        />
        <SubMenuItem
          title={t("sidebar.messages")}
          isActive={isActive("messages")}
          link={Pages.messages.list}
          activeName="contacts_us"
        />
      </div>
    </div>
  );
};

export default OtherSubMenu;
