import { TabContext, TabPanel } from "@mui/lab";
import { Tab, Tabs } from "@mui/material";
import { useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { ProvinceArchiveFees } from "../province-archive-fees/ProvinceArchiveFees";
import { ProvinceFeesOverview } from "../province-fees-overview/ProvinceFeesOverview";
import { ProvincePaidFees } from "../province-paid-fees/ProvincePaidFees";
import { ProvinceUnpaidFees } from "../province-unpaid-fees/ProvinceUnpaidFees";
import { ProvincePaymentByWeight } from "../province-payment-by-weight/ProvincePaymentByWeight";

export const ProvinceManageFees = () => {
  const [tabValue, setTabValue] = useState("1");

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

  return (
    <Grid mr={2}>
      <Grid container alignItems="center" justifyContent="center">
        <Tabs
          scrollButtons="auto"
          variant="scrollable"
          allowScrollButtonsMobile
          value={tabValue}
          onChange={handleTabChange}
        >
          <Tab label="تسویه نشده" value="1" />
          <Tab label="تسویه شده" value="2" />
          <Tab label="اطلاعات کلی" value="3" />
          <Tab label="تعرفه های معوقه" value="4" />
          <Tab label="پرداخت" value="5" />
        </Tabs>
      </Grid>
      <TabContext value={tabValue}>
        <TabPanel value="1">
          <ProvinceUnpaidFees />
        </TabPanel>
        <TabPanel value="2">
          <ProvincePaidFees />
        </TabPanel>
        <TabPanel value="3">
          <ProvinceFeesOverview />
        </TabPanel>
        <TabPanel value="4">
          <ProvinceArchiveFees />
        </TabPanel>
        <TabPanel value="5">
          <ProvincePaymentByWeight />
        </TabPanel>
      </TabContext>
    </Grid>
  );
};
