import { Box, Grid, Tab, Tabs } from "@mui/material";
import { SPACING } from "../../../../data/spacing";
import { useState } from "react";
import { SlaughterManageBars } from "../slaughter-manage-bars/SlaughterManageBars";
import { EnterAggregateLoadInformation } from "../enter-aggregate-load-information/EnterAggregateLoadInformation";
import { EnterLoadInformation } from "../enter-load-information/EnterLoadInformation";
import { SlaughterEnterNoneReciept } from "../slaughter-enter-none-receipt/SlaughterEnterNoneReciept";

export const SalughterEnterBarInfo = () => {
  const [value, setValue] = useState(0);

  const handleChangeTab = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Grid
      container
      direction="column"
      alignItems="center"
      justifyContent="space-between"
      gap={SPACING.SMALL}
      mt={SPACING.MEDIUM}
      width="100%"
    >
      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs
          value={value}
          onChange={handleChangeTab}
          aria-label="basic tabs example"
        >
          <Tab label="وارد کردن اطلاعات بار" />
          <Tab label="وارد کردن تک سندی بار" />
          <Tab label="بارهای تکمیل شده" />
          <Tab label="عدم وصول" />
        </Tabs>
      </Box>
      {value === 0 && <EnterLoadInformation />}
      {value === 1 && <EnterAggregateLoadInformation />}
      {value === 2 && <SlaughterManageBars />}
      {value === 3 && <SlaughterEnterNoneReciept />}
    </Grid>
  );
};
