import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { NavLink } from "../../../../components/nav-link/NavLink";
import { useLocation } from "react-router-dom";
import {
  ROUTE_CITY_ACTIVE_REQUESTS,
  ROUTE_CITY_ARCHIVED_REQUESTS,
  ROUTE_CITY_AWAITING_INSPECTION_REQUESTS,
  ROUTE_CITY_REJECTED_REQUESTS,
  ROUTE_CITY_AWAITING_PAYMENT_REQUESTS,
  ROUTE_CITY_NEW_REQUESTS,
  ROUTE_CITY_FREE_SALES_REQUESTS,
} from "../../../../routes/routes";
import LinkItem from "../../../../components/link-item/LinkItem";
import { VscFolderActive, VscNewFolder } from "react-icons/vsc";
import { GiMoneyStack } from "react-icons/gi";
import { GrInspect } from "react-icons/gr";
import { RiFolderWarningLine } from "react-icons/ri";
import { FaArchive } from "react-icons/fa";

export const CityOperations = () => {
  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={ROUTE_CITY_NEW_REQUESTS}
            active={pathname === ROUTE_CITY_NEW_REQUESTS ? "true" : null}
          >
            <LinkItem
              icon={<VscNewFolder size={30} color="#244CCC" />}
              title="درخواست های جدید"
              description="درخواست های در انتظار بررسی"
            />
          </NavLink>
          <NavLink
            to={ROUTE_CITY_ACTIVE_REQUESTS}
            active={pathname === ROUTE_CITY_ACTIVE_REQUESTS ? "true" : null}
          >
            <LinkItem
              icon={<VscFolderActive size={30} color="#244CCC" />}
              title="درخواست های فعال"
              description="مشاهده درخواست های در جریان"
            />
          </NavLink>

          <NavLink
            to={ROUTE_CITY_AWAITING_PAYMENT_REQUESTS}
            active={
              pathname === ROUTE_CITY_AWAITING_PAYMENT_REQUESTS ? "true" : null
            }
          >
            <LinkItem
              icon={<GiMoneyStack size={30} color="#244CCC" />}
              title="در انتظار پرداخت"
              description="مشاهده درخواست های در انتظار پرداخت کشتارگاه"
            />
          </NavLink>
          <NavLink
            to={ROUTE_CITY_AWAITING_INSPECTION_REQUESTS}
            active={
              pathname === ROUTE_CITY_AWAITING_INSPECTION_REQUESTS
                ? "true"
                : null
            }
          >
            <LinkItem
              icon={
                <GrInspect
                  className="svg-icon-color"
                  color="#244CCC"
                  size={30}
                />
              }
              title="در انتظار بازرسی"
              description="درخواست های در انتظار بررسی بازرس"
            />
          </NavLink>

          <NavLink
            to={ROUTE_CITY_REJECTED_REQUESTS}
            active={pathname === ROUTE_CITY_REJECTED_REQUESTS ? "true" : null}
          >
            <LinkItem
              icon={
                <RiFolderWarningLine
                  className="svg-icon-color"
                  color="#244CCC"
                  size={30}
                />
              }
              title="درخواست های رد شده"
              description="مشاهده درخواست هایی که به دلایل مختلف توسط اتحادیه رد شده است"
            />
          </NavLink>
          <NavLink
            to={ROUTE_CITY_FREE_SALES_REQUESTS}
            active={pathname === ROUTE_CITY_FREE_SALES_REQUESTS ? "true" : null}
          >
            <LinkItem
              icon={<VscFolderActive size={30} color="#244CCC" />}
              title="فروش خارج از استان"
            />
          </NavLink>

          <NavLink
            to={ROUTE_CITY_ARCHIVED_REQUESTS}
            active={pathname === ROUTE_CITY_ARCHIVED_REQUESTS ? "true" : null}
          >
            <LinkItem
              icon={
                <FaArchive
                  className="svg-icon-color"
                  color="#244CCC"
                  size={30}
                />
              }
              title="بایگانی"
              description="درخواست های پایان یافته"
            />
          </NavLink>
        </Grid>
      </Grid>
    </Grid>
  );
};
