import { Box } from "@mui/material";
import React from "react";
import { Grid } from "../components/grid/Grid";
import { NationalInfo } from "../features/city/components/national-info/NationalInfo";
import { useLocation, useParams } from "react-router-dom";
import { NationalInfoHatchingDetails } from "../features/city/components/national-info-hatching-details/NationalInfoHatchingDetails";
import {
  ROUTE_ADMINX_ROUTE_NATIONAL_INFO_SLAUGHTER,
  ROUTE_PROVINCE_SUPERVISOR_ROUTE_NATIONAL_INFO_SLAUGHTER,
  ROUTE_SUPER_ADMIN_ROUTE_NATIONAL_INFO_SLAUGHTER,
} from "../routes/routes";
import { NationalInfoTransports } from "../features/city/components/national-info-bars/NationalInfoTransports";
import { ProvinceChickenDistributionsAndSalesDetails } from "../features/province/components/province-chicken-distribution-and-sales-details/ProvinceChickenDistributionsAndSalesDetails";

const NationalInfoPage = () => {
  const { key, name, type } = useParams();
  const { pathname } = useLocation();
  const isSlaughterDetailsRoute =
    pathname.includes(ROUTE_ADMINX_ROUTE_NATIONAL_INFO_SLAUGHTER) ||
    pathname.includes(
      ROUTE_PROVINCE_SUPERVISOR_ROUTE_NATIONAL_INFO_SLAUGHTER
    ) ||
    pathname.includes(ROUTE_SUPER_ADMIN_ROUTE_NATIONAL_INFO_SLAUGHTER);

  return (
    <>
      <Box display={"flex"} justifyContent="center">
        <Grid
          container
          direction="column"
          justifyContent="center"
          xs={12}
          sm={12}
          md={10}
          lg={10}
          mt={4}
        >
          {type ? (
            <ProvinceChickenDistributionsAndSalesDetails />
          ) : isSlaughterDetailsRoute ? (
            <NationalInfoTransports />
          ) : key || name ? (
            <NationalInfoHatchingDetails />
          ) : (
            <NationalInfo />
          )}
        </Grid>
      </Box>
    </>
  );
};

export default NationalInfoPage;
