import React from "react";
import { Grid } from "../components/grid/Grid";
import { Box, Typography } from "@mui/material";
import { BackButton } from "../components/back-button/BackButton";
import { useLocation } from "react-router-dom";
import {
  ROUTE_ADMINX_SUB_SECTORS_WAGE,
  ROUTE_ADMINX_SUB_SECTORS_STEWARD_SHARES,
  ROUTE_ADMINX_SUB_SECTORS_CITY_SHARES,
  ROUTE_ADMINX_SUB_SECTORS_VET_FARM_SHARES,
  ROUTE_PROVINCE_FINANCIAL_SUB_SECTORS_WAGE,
  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_WAGE,
  ROUTE_PROVINCE_SUB_SECTORS_STEWARD_SHARES,
  ROUTE_PROVINCE_SUB_SECTORS_CITY_SHARES,
  ROUTE_PROVINCE_SUB_SECTORS_VET_FARM_SHARES,
  ROUTE_SUPER_ADMIN_SUB_SECTORS_WAGE,
  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";
import { SPACING } from "../data/spacing";
import { ProvinceSubSectorWageOperations } from "../features/province/components/province-sub-sector-wage-operations/ProvinceSubSectorWageOperations";
import { ProvinceSubSectorCityShares } from "../features/province/components/province-sub-sector-city-shares/ProvinceSubSectorCityShares";
import { ProvinceSubSectorWageDeposits } from "../features/province/components/province-sub-sector-wage-deposits/ProvinceSubSectorWageDeposits";
import { ProvinceSubSectorVetFarmShares } from "../features/province/components/province-sub-sector-vet-farm-shares/ProvinceSubSectorVetFarmShares";

const SubSectorWage = () => {
  const { pathname } = useLocation();
  return (
    <>
      <Box display={"flex"} justifyContent="center">
        <Grid
          container
          direction="column"
          justifyContent="center"
          xs={12}
          sm={12}
          md={10}
          lg={10}
        >
          {pathname === ROUTE_PROVINCE_SUB_SECTORS_WAGE ||
          pathname === ROUTE_PROVINCE_FINANCIAL_SUB_SECTORS_WAGE ||
          pathname === ROUTE_SUPER_ADMIN_SUB_SECTORS_WAGE ||
          pathname === ROUTE_ADMINX_SUB_SECTORS_WAGE ? (
            <Grid justifyContent="center" my={SPACING.MEDIUM}>
              <Grid>
                <Typography variant="h6">تعرفه زیربخش ها</Typography>
              </Grid>
              <ProvinceSubSectorWageOperations />
            </Grid>
          ) : (
            <BackButton />
          )}
          <Grid container justifyContent="space-between" gap={SPACING.SMALL}>
            <Grid xs={12}>
              {(pathname === ROUTE_PROVINCE_SUB_SECTORS_CITY_SHARES ||
                pathname === ROUTE_PROVINCE_FINANCIAL_SUB_SECTORS_CITY_SHARES ||
                pathname === ROUTE_SUPER_ADMIN_SUB_SECTORS_CITY_SHARES ||
                pathname === ROUTE_ADMINX_SUB_SECTORS_CITY_SHARES) && (
                <ProvinceSubSectorCityShares />
              )}

              {(pathname === ROUTE_PROVINCE_SUB_SECTORS_VET_FARM_SHARES ||
                pathname ===
                  ROUTE_PROVINCE_FINANCIAL_SUB_SECTORS_VET_FARM_SHARES ||
                pathname === ROUTE_SUPER_ADMIN_SUB_SECTORS_VET_FARM_SHARES ||
                pathname === ROUTE_ADMINX_SUB_SECTORS_VET_FARM_SHARES) && (
                <ProvinceSubSectorVetFarmShares />
              )}

              {(pathname === ROUTE_PROVINCE_SUB_SECTORS_STEWARD_SHARES ||
                pathname ===
                  ROUTE_PROVINCE_FINANCIAL_SUB_SECTORS_STEWARD_SHARES ||
                pathname === ROUTE_SUPER_ADMIN_SUB_SECTORS_STEWARD_SHARES ||
                pathname === ROUTE_ADMINX_SUB_SECTORS_STEWARD_SHARES) && (
                <ProvinceSubSectorWageDeposits />
              )}
            </Grid>
          </Grid>
        </Grid>
      </Box>
    </>
  );
};

export default SubSectorWage;
