import { Profile } from "iconsax-react";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import { Pages } from "../../config/Pages";
import { TASK_MANAGER_PERMISSION_RESOURCES } from "../../helpers/permissions";
import SubMenuItem from "./SubMenuItem";

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

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

  const isTaskManagerActive =
    location.pathname.startsWith(Pages.taskmanager.workspace) ||
    location.pathname === Pages.taskmanager.workspaceList ||
    location.pathname.startsWith(Pages.taskmanager.updateWorkspace) ||
    location.pathname === Pages.taskmanager.createWorkspace ||
    location.pathname === Pages.taskmanager.createProject ||
    location.pathname.startsWith(Pages.taskmanager.updateProject) ||
    location.pathname.startsWith(Pages.taskmanager.projectList);

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

      <div className="flex flex-col mt-10 gap-4">
        <SubMenuItem
          title={t("submenu.user_list")}
          isActive={isActive("/users/list")}
          link={Pages.users.list}
          activeName="admins"
        />
        <SubMenuItem
          title={t("submenu.role_list")}
          isActive={isActive("roles-all") || isActive("roles-edit") || isActive("roles-add")}
          link={Pages.users.roleList}
          activeName="admins"
        />
        <SubMenuItem
          title={t("user.list_user_group")}
          isActive={isActive("/users/groups") || isActive("group-add")}
          link={Pages.users.groupList}
          activeName="admins"
        />
        <SubMenuItem
          title={t("sidebar.taskmanager")}
          isActive={isTaskManagerActive}
          link={Pages.taskmanager.workspaceList}
          activeNames={TASK_MANAGER_PERMISSION_RESOURCES}
        />
      </div>
    </div>
  );
};

export default UsersSubMenu;