import { Tab, Tabs } from "@mui/material";
import { useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { ProvinceManagePoultryRequest } from "../../../province/components/province-manage-poultry-request/ProvinceManagePoultryRequest";
import { ProvinceManageSlaughterRequest } from "../../../province/components/province-manage-slaughter-request/ProvinceManageSlaughterRequest";
import { CityManageHatchings } from "../city-manage-hatchings/CityManageHatchings";
import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl";

export const CityHatching = () => {
  // const handleSubmit = (event) => {
  //   event.preventDefault();
  //   // Handle form submission here
  //   dispatch(
  //     updatePoultryRequestsTotalQuantityService({
  //       key: poultryRequestsTotalQuantity?.key,
  //       input_quantity: Number(formik.values.numberInput),
  //     })
  //   ).then((r) => {
  //     openNotif({
  //       vertical: "top",
  //       horizontal: "center",
  //       msg: "عملیات با موفقیت انجام شد.",
  //       severity: "success",
  //     });
  //   });
  // };

  const [activeTab, setActiveTab] = useState(0);

  const handleTabChange = (event, newValue) => {
    setActiveTab(newValue);
  };

  return (
    <Grid container gap={SPACING.MEDIUM} alignItems="center" direction="column">
      <>
        <Tabs
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
          value={activeTab}
          onChange={handleTabChange}
        >
          <Tab label="درخواست مرغدار" />
          {getRoleFromUrl() !== "CityPoultry" && (
            <Tab label="درخواست کشتارگاه" />
          )}
          {/* <Tab label="جوجه ریزی" /> */}
        </Tabs>
        <TabPanel value={activeTab} index={2}>
          <CityManageHatchings />
        </TabPanel>
        <TabPanel value={activeTab} index={0}>
          <ProvinceManagePoultryRequest />
        </TabPanel>
        <TabPanel value={activeTab} index={1}>
          {getRoleFromUrl() !== "CityPoultry" ? (
            <ProvinceManageSlaughterRequest />
          ) : (
            <CityManageHatchings />
          )}
        </TabPanel>
      </>
    </Grid>
  );
};

function TabPanel(props) {
  const { children, value, index } = props;

  return (
    <div role="tabpanel" hidden={value !== index}>
      {value === index && <>{children}</>}
    </div>
  );
}
