import React from "react";
import { Grid } from "../../../../components/grid/Grid";
import { Tab, Tabs } from "@mui/material";
import { ProvinceChainsCompanies } from "../chains-companies/ProvinceChainsCompanies";
import { ChainsActiveChains } from "../chains-active-chains/ChainsActiveChains";
import { ChainsArchiveChains } from "../chain-archive-chains/ChainsArchiveChains";
import { ChainBarManagement } from "../chain-bar-management/ChainBarManagement";

export const ProvinceChains = () => {
  const [value, setValue] = React.useState("0");

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <Grid container justifyContent="center" xs={12}>
      <Tabs
        value={value}
        onChange={handleChange}
        textColor="secondary"
        indicatorColor="secondary"
        aria-label="secondary tabs example"
        scrollButtons="auto"
        variant="scrollable"
        allowScrollButtonsMobile
      >
        <Tab value="0" label="زنجیره های فعال" />
        <Tab value="1" label="مدیریت بارها" />
        <Tab value="2" label="شرکت ها" />
        <Tab value="3" label="بایگانی" />
      </Tabs>
      <Grid
        container
        justifyContent="center"
        alignItems="center"
        px={2}
        xs={12}
      >
        <Grid container justifyContent="center" mt={2} xs={12}>
          {value === "0" && <ChainsActiveChains />}
        </Grid>
        <Grid container justifyContent="center" mt={2} xs={12}>
          {value === "1" && <ChainBarManagement />}
        </Grid>
        <Grid container justifyContent="center" mt={2} xs={12}>
          {value === "2" && <ProvinceChainsCompanies />}
        </Grid>
        <Grid container justifyContent="center" xs={12}>
          {value === "3" && <ChainsArchiveChains />}
        </Grid>
      </Grid>
    </Grid>
  );
};
