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_PROVINCE_FINANCIAL_ACTIVE_REQUESTS,
  ROUTE_PROVINCE_FINANCIAL_ARCHIVED_REQUESTS,
  ROUTE_PROVINCE_FINANCIAL_AWAITING_INSPECTION_REQUESTS,
  ROUTE_PROVINCE_FINANCIAL_AWAITING_PAYMENT_REQUESTS,
  ROUTE_PROVINCE_FINANCIAL_CHECK_PAYED_FACTOR_REQUESTS,
  ROUTE_PROVINCE_FINANCIAL_FINAL_FACTORS_REQUESTS,
  ROUTE_PROVINCE_FINANCIAL_PENDING_REQUESTS,
  ROUTE_PROVINCE_FINANCIAL_TRANSACTIONS,
  // ROUTE_PROVINCE_FINANCIAL_REJECTED_REQUESTS,
} from "../../../../routes/routes";
import LinkItem from "../../../../components/link-item/LinkItem";
import { MdOutlinePendingActions } from "react-icons/md";
import { GiMoneyStack } from "react-icons/gi";
import { CiMoneyCheck1 } from "react-icons/ci";
import { VscFolderActive } from "react-icons/vsc";
import { GrInspect } from "react-icons/gr";
import { FaArchive, FaExchangeAlt } from "react-icons/fa";
import { LineWithText } from "../../../../components/line-with-text/LineWithText";

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

  return (
    <Grid
      container
      gap={SPACING.SMALL}
      p={SPACING.SMALL}
      direction={{ xs: "column", md: "row" }}
      justifyContent="center"
      style={{ placeContent: "baseline" }}
    >
      {/* <NavLink
        to={ROUTE_PROVINCE_FINANCIAL_NEW_REQUESTS}
        active={
          pathname === ROUTE_PROVINCE_FINANCIAL_NEW_REQUESTS ? "true" : null
        }
      >
        <Button variant="text" color="inherit">
          درخواست های جدید
        </Button>
      </NavLink> */}

      <Grid container direction="column" style={{ width: "100%" }}>
        <Grid>
          <LineWithText text="صدور فاکتور" />
        </Grid>
        <Grid container justifyContent="center" gap={SPACING.SMALL}>
          <NavLink
            to={ROUTE_PROVINCE_FINANCIAL_PENDING_REQUESTS}
            active={
              pathname === ROUTE_PROVINCE_FINANCIAL_PENDING_REQUESTS
                ? "true"
                : null
            }
          >
            <LinkItem
              icon={<MdOutlinePendingActions size={30} color="#244CCC" />}
              title="صدور فاکتور"
              description="درخواست های در انتظار تایید و صدور فاکتور"
            />
          </NavLink>

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

          <NavLink
            to={ROUTE_PROVINCE_FINANCIAL_CHECK_PAYED_FACTOR_REQUESTS}
            active={
              pathname === ROUTE_PROVINCE_FINANCIAL_CHECK_PAYED_FACTOR_REQUESTS
                ? "true"
                : null
            }
          >
            <LinkItem
              icon={<GiMoneyStack size={30} color="#244CCC" />}
              title="فاکتورهای پرداخت شده"
              description="بررسی فاکتورهای پرداخت شده"
            />
          </NavLink>
          <NavLink
            to={ROUTE_PROVINCE_FINANCIAL_TRANSACTIONS}
            active={
              pathname === ROUTE_PROVINCE_FINANCIAL_TRANSACTIONS ? "true" : null
            }
          >
            <LinkItem
              icon={
                <FaExchangeAlt
                  size={30}
                  style={{ color: "#4285F4" }}
                  color="#244CCC"
                />
              }
              title="تراکنش ها"
            />
          </NavLink>
        </Grid>
      </Grid>

      <Grid container direction="column" style={{ width: "100%" }}>
        <Grid>
          <LineWithText text="اسناد" />
        </Grid>
        <Grid container justifyContent="center" gap={SPACING.SMALL}>
          <NavLink
            to={ROUTE_PROVINCE_FINANCIAL_FINAL_FACTORS_REQUESTS}
            active={
              pathname === ROUTE_PROVINCE_FINANCIAL_FINAL_FACTORS_REQUESTS
                ? "true"
                : null
            }
          >
            <LinkItem
              icon={<CiMoneyCheck1 size={30} color="#244CCC" />}
              title="اسناد مالی"
              description="مشاهده و بررسی فاکتور های نهایی"
            />
          </NavLink>
          <NavLink
            to={ROUTE_PROVINCE_FINANCIAL_ACTIVE_REQUESTS}
            active={
              pathname === ROUTE_PROVINCE_FINANCIAL_ACTIVE_REQUESTS
                ? "true"
                : null
            }
          >
            <LinkItem
              icon={<VscFolderActive size={30} color="#244CCC" />}
              title="درخواست های فعال"
              description="مشاهده درخواست های در جریان"
            />
          </NavLink>
          <NavLink
            to={ROUTE_PROVINCE_FINANCIAL_AWAITING_INSPECTION_REQUESTS}
            active={
              pathname === ROUTE_PROVINCE_FINANCIAL_AWAITING_INSPECTION_REQUESTS
                ? "true"
                : null
            }
          >
            <LinkItem
              icon={
                <GrInspect
                  className="svg-icon-color"
                  fill="#244CCC"
                  stroke="#244CCC"
                  style={{ color: "#4285F4" }}
                  color="#244CCC"
                  size={30}
                />
              }
              title="در انتظار بازرسی"
              description="درخواست های در انتظار بررسی بازرس"
            />
          </NavLink>

          {/* <NavLink
        to={ROUTE_PROVINCE_FINANCIAL_REJECTED_REQUESTS}
        active={
          pathname === ROUTE_PROVINCE_FINANCIAL_REJECTED_REQUESTS
            ? "true"
            : null
        }
      >
        <Button variant="text" color="inherit">
          درخواست های رد شده
        </Button>
      </NavLink> */}

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