import React, { useState } from "react";
import { Box, Divider, Tab, Tabs } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { ProvinceDispensersSellCarcassSellOut } from "../province-dispensers-sell-carcass-sell-out/ProvinceDispensersSellCarcassSellOut";
import { ProvinceDispensersSellCarcassBuyersOut } from "../province-dispensers-sell-carcass-buyers-out/ProvinceDispensersSellCarcassBuyersOut";

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

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

  const [valueOutProvince, setValueOutProvince] = useState(0);

  const handleChangeTabsetOutProvince = (event, newValue) => {
    setValueOutProvince(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="داخل استان" />
        </Tabs>
      </Box>

      <Divider style={{ width: "100%" }} />

      {value === 0 && (
        <Grid
          container
          direction="column"
          alignItems="center"
          justifyContent="space-between"
          gap={SPACING.SMALL}
          width="100%"
        >
          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
            <Tabs
              className="insidetabs"
              size="small"
              value={valueOutProvince}
              onChange={handleChangeTabsetOutProvince}
              aria-label="basic tabs example"
            >
              <Tab label="فروش" />
              <Tab label="خریداران" />
            </Tabs>
          </Box>

          {valueOutProvince === 0 && <ProvinceDispensersSellCarcassSellOut />}

          {valueOutProvince === 1 && <ProvinceDispensersSellCarcassBuyersOut />}
        </Grid>
      )}
    </Grid>
  );
};
