import { Box, Typography } from "@mui/material";
import { Grid } from "../components/grid/Grid";

import {
  ROUTE_ADMINX_SETTLEMENTS,
  ROUTE_SUPER_ADMIN_SETTLEMENTS,
  ROUTE_PROVINCE_FINANCIAL_SETTLEMENT,
  ROUTE_PROVINCE_SETTLEMENTS,
} from "../routes/routes";
import { useLocation } from "react-router-dom";
import ProvinceSettlement from "../features/province/components/province-settlement/ProvinceSettlement";
import { BackButton } from "../components/back-button/BackButton";
import { SPACING } from "../data/spacing";

const AdminSettlement = () => {
  const { pathname } = useLocation();
  return (
    <Box
      display={"flex"}
      alignItems="center"
      justifyContent="center"
      direction="column"
    >
      <Grid
        container
        display={"flex"}
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
      >
        {pathname === ROUTE_PROVINCE_SETTLEMENTS ||
        pathname === ROUTE_PROVINCE_FINANCIAL_SETTLEMENT ||
        pathname === ROUTE_SUPER_ADMIN_SETTLEMENTS ||
        pathname === ROUTE_ADMINX_SETTLEMENTS ? (
          <>
            <BackButton />

            <Grid justifyContent="center" alignItems="center">
              <ProvinceSettlement />
            </Grid>
          </>
        ) : (
          <>
            <Grid mt={SPACING.MEDIUM}>
              <Typography variant="h6">تسویه حساب</Typography>
            </Grid>
            <Grid justifyContent="center" alignItems="center">
              <ProvinceSettlement />
            </Grid>
          </>
        )}
      </Grid>
    </Box>
  );
};

export default AdminSettlement;