import React, { useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { Tab, Tabs } from "@mui/material";
import { NationalInfoHatchings } from "../national-info-hatchings/NationalInfoHatchings";
import { NationalInfoTransports } from "../national-info-bars/NationalInfoTransports";
// import { NationalinfokillingReport } from "../national-info-killing-report/NationalinfokillingReport";
import NationalMap from "../national-map/NationalMap";
import { ProvinceNationalInfoFarms } from "../../../province/components/province-national-info-farms/ProvinceNationalInfoFarms";
import { ProvinceNationalInfoSlaughterhouse } from "../../../province/components/province-national-info-Slaughterhouse/ProvinceNationalInfoSlaughterhouse";
import { ProvinceChickenDistributionsAndSales } from "../../../province/components/province-chicken-distribution-and-sales/ProvinceChickenDistributionsAndSales";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";
import { ProvinceChickenStewardSales } from "../../../province/components/province-chicken-steward-sales/ProvinceChickenStewardSales";
import { TotalCargoInformation } from "../../../province/components/total-cargo-information/TotalCargoInformation";

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

  const ableToSee =
    getRoleFromUrl() === "AdminX" ||
    getRoleFromUrl() === "SuperAdmin" ||
    getRoleFromUrl() === "ProvinceOperator";

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <Grid container xs={12} justifyContent="center" alignItems="center">
      <Grid
        container
        xs={12}
        justifyContent="center"
        alignItems="center"
        mt={4}
      >
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="simple tabs example"
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
        >
          <Tab value={0} label="مدیریت  فارم ها" />
          <Tab value={1} label="جوجه ریزی ها " />
          <Tab value={2} label="اطلاعات بارها " />
          <Tab value={3} label="پایش کشتارگاه ها  " />
          <Tab value={4} label="نقشه کشوری" />
          {ableToSee && <Tab value={5} label="توزیع / فروش گوشت مرغ" />}
          {ableToSee && <Tab value={6} label="خرید صنوف" />}
          {ableToSee && <Tab value={7} label="اطلاعات حمل محصولات" />}
        </Tabs>
      </Grid>

      <Grid container xs={12} justifyContent="center" mt={2} px={2}>
        {value === 0 && <ProvinceNationalInfoFarms />}
        {value === 1 && <NationalInfoHatchings />}
        {value === 2 && <NationalInfoTransports />}
        {value === 3 && <ProvinceNationalInfoSlaughterhouse />}
        {value === 4 && <NationalMap />}
        {value === 5 && <ProvinceChickenDistributionsAndSales />}
        {value === 6 && <ProvinceChickenStewardSales />}
        {value === 7 && <TotalCargoInformation />}
      </Grid>
    </Grid>
  );
};
