import { Box } from "@mui/material";
import React from "react";
import { Grid } from "../components/grid/Grid";
import { useLocation, useParams } from "react-router-dom";
import { ProvinceBuyersAllocations } from "../features/province/components/province-buyers-allocations/ProvinceBuyersAllocations";
import { ProvinceBuyerStewardAllocation } from "../features/province/components/province-buyer-steward-allocation/ProvinceBuyerStewardAllocation";
import { SPACING } from "../data/spacing";
import { BackButton } from "../components/back-button/BackButton";
import { ROUTE_PROVINCE_ROUTE_STEWARD_SHARE } from "../routes/routes";
import { ProvinceGuildAllocation } from "../features/province/components/province-guild-allocation.js/ProvinceGuildAllocation";

const SlaughterAgentShare = () => {
  const params = useParams();
  const buyerId = params?.id;
  const { pathname } = useLocation();

  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
        mt={SPACING.SMALL}
      >
        <BackButton />

        {pathname === ROUTE_PROVINCE_ROUTE_STEWARD_SHARE ? (
          <ProvinceGuildAllocation />
        ) : (
          <>
            {!buyerId && <ProvinceBuyersAllocations />}
            {buyerId && <ProvinceBuyerStewardAllocation />}
          </>
        )}
      </Grid>
    </Box>
  );
};

export default SlaughterAgentShare;
