import { useLocation } from "react-router-dom";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { NavLink } from "../../../../components/nav-link/NavLink";
import LinkItem from "../../../../components/link-item/LinkItem";
import { VscTag } from "react-icons/vsc";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
import {
  ROUTE_ADMINX_SUB_SECTORS_STEWARD_SHARES,
  ROUTE_ADMINX_SUB_SECTORS_CITY_SHARES,
  ROUTE_ADMINX_SUB_SECTORS_VET_FARM_SHARES,
  ROUTE_PROVINCE_FINANCIAL_SUB_SECTORS_STEWARD_SHARES,
  ROUTE_PROVINCE_FINANCIAL_SUB_SECTORS_CITY_SHARES,
  ROUTE_PROVINCE_FINANCIAL_SUB_SECTORS_VET_FARM_SHARES,
  ROUTE_PROVINCE_SUB_SECTORS_STEWARD_SHARES,
  ROUTE_PROVINCE_SUB_SECTORS_CITY_SHARES,
  ROUTE_PROVINCE_SUB_SECTORS_VET_FARM_SHARES,
  ROUTE_SUPER_ADMIN_SUB_SECTORS_STEWARD_SHARES,
  ROUTE_SUPER_ADMIN_SUB_SECTORS_CITY_SHARES,
  ROUTE_SUPER_ADMIN_SUB_SECTORS_VET_FARM_SHARES,
} from "../../../../routes/routes";

export const ProvinceSubSectorWageOperations = () => {
  const { pathname } = useLocation();

  return (
    <Grid
      container
      gap={SPACING.SMALL}
      p={SPACING.SMALL}
      direction={{ xs: "column", md: "row" }}
      justifyContent="center"
      style={{ placeContent: "baseline" }}
    >
      <Grid container direction="column" style={{ width: "100%" }}>
        <Grid container gap={SPACING.SMALL} justifyContent="center">
          <NavLink
            to={
              getRoleFromUrl() === "ProvinceOperator"
                ? ROUTE_PROVINCE_SUB_SECTORS_CITY_SHARES
                : getRoleFromUrl() === "AdminX"
                ? ROUTE_ADMINX_SUB_SECTORS_CITY_SHARES
                : getRoleFromUrl() === "SuperAdmin"
                ? ROUTE_SUPER_ADMIN_SUB_SECTORS_CITY_SHARES
                : ROUTE_PROVINCE_FINANCIAL_SUB_SECTORS_CITY_SHARES
            }
            active={
              pathname === ROUTE_PROVINCE_SUB_SECTORS_CITY_SHARES
                ? "true"
                : null
            }
          >
            <LinkItem
              icon={<VscTag size={30} color="#244CCC" />}
              title="سهم تعاونی"
              description="سهم تعاونی"
            />
          </NavLink>

          <NavLink
            to={
              getRoleFromUrl() === "ProvinceOperator"
                ? ROUTE_PROVINCE_SUB_SECTORS_VET_FARM_SHARES
                : getRoleFromUrl() === "AdminX"
                ? ROUTE_ADMINX_SUB_SECTORS_VET_FARM_SHARES
                : getRoleFromUrl() === "SuperAdmin"
                ? ROUTE_SUPER_ADMIN_SUB_SECTORS_VET_FARM_SHARES
                : ROUTE_PROVINCE_FINANCIAL_SUB_SECTORS_VET_FARM_SHARES
            }
            active={
              pathname === ROUTE_PROVINCE_SUB_SECTORS_VET_FARM_SHARES
                ? "true"
                : null
            }
          >
            <LinkItem
              icon={<VscTag size={30} color="#244CCC" />}
              title="سهم دامپزشک فارم"
              description="سهم دامپزشک فارم"
            />
          </NavLink>

          <NavLink
            to={
              getRoleFromUrl() === "ProvinceOperator"
                ? ROUTE_PROVINCE_SUB_SECTORS_STEWARD_SHARES
                : getRoleFromUrl() === "AdminX"
                ? ROUTE_ADMINX_SUB_SECTORS_STEWARD_SHARES
                : getRoleFromUrl() === "SuperAdmin"
                ? ROUTE_SUPER_ADMIN_SUB_SECTORS_STEWARD_SHARES
                : ROUTE_PROVINCE_FINANCIAL_SUB_SECTORS_STEWARD_SHARES
            }
            active={
              pathname === ROUTE_PROVINCE_SUB_SECTORS_STEWARD_SHARES
                ? "true"
                : null
            }
          >
            <LinkItem
              icon={<VscTag size={30} color="#244CCC" />}
              title="سهم صنف"
              description="سهم صنف"
            />
          </NavLink>
        </Grid>
      </Grid>
    </Grid>
  );
};
