import React from "react";
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 {
  VscAdd,
  VscOutput,
  VscSymbolProperty,
  VscTable,
} from "react-icons/vsc";
import {
  ROUTE_COOPERATIVE_PRODUCT_DISTRIBUTION_ALLOCATION,
  ROUTE_COOPERATIVE_PRODUCT_DISTRIBUTION_POLICY,
  ROUTE_PROVINCE_JAHAD_PRODUCT_DISTRIBUTION,
  ROUTE_PROVINCE_JAHAD_PRODUCT_DISTRIBUTION_ALLOCATION,
  ROUTE_PROVINCE_JAHAD_PRODUCT_DISTRIBUTION_POLICY,
  ROUTE_PROVINCE_JAHAD_PRODUCT_SHARES,
  ROUTE_PROVINCE_JAHAD_SELL_REPORT,
  ROUTE_UNION_PRODUCT_DISTRIBUTION,
  ROUTE_UNION_PRODUCT_DISTRIBUTION_ALLOCATION,
  ROUTE_UNION_PRODUCT_DISTRIBUTION_POLICY,
  ROUTE_UNION_SELL_REPORT,
} from "../../../../routes/routes";
import { useLocation } from "react-router-dom";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";

export const ProvinceJahadBranDistributions = ({ product }) => {
  const { pathname } = useLocation();

  const getProductColor =
    product?.key === "bran"
      ? "rgba(224, 224, 224, 0.5)"
      : product?.key === "barley"
      ? "rgba(245, 194, 149, 0.5)"
      : product?.key === "soy"
      ? "rgba(164, 239, 204, 0.5)"
      : product?.key === "corn"
      ? "rgba(193, 239, 164, 0.5)"
      : "rgba(132, 243, 233, 0.5)";

  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
            active={ROUTE_PROVINCE_JAHAD_PRODUCT_DISTRIBUTION_ALLOCATION}
            to={
              pathname === ROUTE_PROVINCE_JAHAD_PRODUCT_DISTRIBUTION
                ? ROUTE_PROVINCE_JAHAD_PRODUCT_DISTRIBUTION_ALLOCATION
                : pathname === ROUTE_UNION_PRODUCT_DISTRIBUTION
                ? ROUTE_UNION_PRODUCT_DISTRIBUTION_ALLOCATION
                : ROUTE_COOPERATIVE_PRODUCT_DISTRIBUTION_ALLOCATION
            }
          >
            <LinkItem
              style={{ backgroundColor: getProductColor }}
              icon={<VscAdd size={30} color="#244CCC" />}
              title={`انبار و تخصیص ${product?.label}`}
              description={`انبار و تخصیص ${product?.label}`}
            />
          </NavLink>

          {(getRoleFromUrl() === "LiveStockProvinceJahad" ||
            getRoleFromUrl() === "Union") && (
            <NavLink
              active={ROUTE_PROVINCE_JAHAD_PRODUCT_DISTRIBUTION_POLICY}
              to={
                pathname === ROUTE_PROVINCE_JAHAD_PRODUCT_DISTRIBUTION
                  ? ROUTE_PROVINCE_JAHAD_PRODUCT_DISTRIBUTION_POLICY
                  : pathname === ROUTE_UNION_PRODUCT_DISTRIBUTION
                  ? ROUTE_UNION_PRODUCT_DISTRIBUTION_POLICY
                  : ROUTE_COOPERATIVE_PRODUCT_DISTRIBUTION_POLICY
              }
            >
              <LinkItem
                style={{ backgroundColor: getProductColor }}
                icon={<VscSymbolProperty size={30} color="#244CCC" />}
                title={`مدیریت توزیع ${product?.label}`}
                description={`مدیریت توزیع ${product?.label}`}
              />
            </NavLink>
          )}

          {(getRoleFromUrl() === "LiveStockProvinceJahad" ||
            getRoleFromUrl() === "Union") && (
            <NavLink
              active={
                pathname === ROUTE_PROVINCE_JAHAD_PRODUCT_DISTRIBUTION
                  ? ROUTE_PROVINCE_JAHAD_SELL_REPORT
                  : ROUTE_UNION_SELL_REPORT
              }
              to={
                getRoleFromUrl() === "LiveStockProvinceJahad"
                  ? ROUTE_PROVINCE_JAHAD_SELL_REPORT
                  : ROUTE_UNION_SELL_REPORT
              }
            >
              <LinkItem
                style={{ backgroundColor: getProductColor }}
                icon={<VscOutput size={30} color="#244CCC" />}
                title={`گزارش فروش ${product?.label}`}
                description={`گزارش فروش ${product?.label}`}
              />
            </NavLink>
          )}

          {getRoleFromUrl() === "LiveStockProvinceJahad" && (
            <NavLink
              active={ROUTE_PROVINCE_JAHAD_PRODUCT_SHARES}
              to={ROUTE_PROVINCE_JAHAD_PRODUCT_SHARES}
            >
              <LinkItem
                style={{ backgroundColor: getProductColor }}
                icon={<VscTable size={30} color="#244CCC" />}
                title={`سهم بندی ${product?.label}`}
                description={`سهم بندی ${product?.label}`}
              />
            </NavLink>
          )}
        </Grid>
      </Grid>
    </Grid>
  );
};
