import { Box, Typography } 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_STOCK,
} from "../routes/routes";
import { SenfStock } from "../features/senf/components/SenfStock";

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}
        >
          {pathname === ROUTE_SENF_INVENTORY ? (
            <Grid
              container
              direction="column"
              justifyContent="center"
              alignItems="center"
              my={SPACING.MEDIUM}
            >
              <Grid container alignItems="center" gap={SPACING.SMALL}>
                <Grid>
                  <Typography variant="h6">مدیریت انبار</Typography>
                </Grid>
              </Grid>
              <SenfInventoryOperation />
            </Grid>
          ) : (
            <BackButton />
          )}
          {pathname.includes(ROUTE_SENF_INVENTORY_STOCK) && <SenfStock />}
        </Grid>
      </Box>
    </>
  );
};

export default SenfInventoryPage;
