import { Box } from "@mui/material";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { useLocation } from "react-router-dom";
import { BackButton } from "../components/back-button/BackButton";
import { SenfInventoryOperation } from "../features/senf/components/SenfInventoryOperation";
import {
  ROUTE_SENF_INVENTORY,
  ROUTE_SENF_INVENTORY_ENTER,
  ROUTE_SENF_INVENTORY_SEGMENTATION,
  ROUTE_SENF_INVENTORY_STOCK,
} from "../routes/routes";
import { SenfStock } from "../features/senf/components/SenfStock";
import { SenfSegmentaion } from "../features/senf/components/SenfSegmentaion";
import { SenfEnterToWarehouse } from "../features/senf/components/SenfEnterToWarehouse";

const SenfInventoryPage = () => {
  const { pathname } = useLocation();

  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
      >
        <BackButton />
        {pathname === ROUTE_SENF_INVENTORY && (
          <Grid
            container
            direction="column"
            justifyContent="center"
            alignItems="center"
            my={SPACING.MEDIUM}
          >
            <SenfInventoryOperation />
          </Grid>
        )}
        {pathname.includes(ROUTE_SENF_INVENTORY_STOCK) && <SenfStock />}
        {pathname.includes(ROUTE_SENF_INVENTORY_SEGMENTATION) && (
          <SenfSegmentaion />
        )}
        {pathname.includes(ROUTE_SENF_INVENTORY_ENTER) && (
          <SenfEnterToWarehouse />
        )}
      </Grid>
    </Box>
  );
};

export default SenfInventoryPage;
