import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { Tab, Tabs } from "@mui/material";
import { ProvinceBarDifferenceRequests } from "../province-bar-difference-requests/ProvinceBarDifferenceRequests";
import { ProvinceBarDashboardService } from "../../services/province-bar-dashbored";

export const ProvinceBarDifference = () => {
  const [value, setValue] = useState("0");
  const dispatch = useDispatch();

  const handleChange = (event, newValue) => {
    setValue(newValue);
    dispatch(
      ProvinceBarDashboardService({
        state: newValue === "0" ? "pending" : "archive",
      })
    );
  };

  return (
    <Grid container xs={12} justifyContent="center" alignItems="center">
      <Tabs value={value} onChange={handleChange}>
        <Tab value="0" label="جدید" />
        <Tab value="1" label="بایگانی شده" />
      </Tabs>

      <Grid container xs={12} justifyContent="center" alignItem="center" mt={2}>
        <ProvinceBarDifferenceRequests
          state={value === "0" ? "pending" : "archive"}
        />
      </Grid>
    </Grid>
  );
};
