import {
  // IconButton,
  ToggleButton,
  ToggleButtonGroup,
  Typography,
} from "@mui/material";
import { useState } from "react";
// import { useSelector } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";

// import { formatJustDate } from "../../../../utils/formatTime";

import { ProvinceCaseStatusComponent } from "../province-case-status/ProvinceCaseStatusComponent";

import { ProvinceCases } from "../province-cases/ProvinceCases";
import { ProvinceManageContradictions } from "../province-manage-contradictions/ProvinceManageContradictions";
import { ProvinceKillbroadcastInDetail } from "../province-kill-broadcast-in-detail/ProvinceKillbroadcastInDetail";
import { ProvinceSlaughterSurveillance } from "../province-slaughter-surveillance/ProvinceSlaughterSurveillance";

export const ProvinceFilesState = () => {
  const [view, setView] = useState("new");

  const handleChange = (event, newAlignment) => {
    if (newAlignment) {
      setView(newAlignment);
    }
  };

  // const updateTable = () => {
  //   fetchApiData(1);
  // };

  return (
    <Grid
      container
      direction="column"
      mt={SPACING.MEDIUM}
      xs={12}
      justifyContent="center"
    >
      <Grid contaienr justifyContent="end" mb={SPACING.SMALL}>
        <Grid container alignItems="center" gap={SPACING.SMALL}>
          <Typography>نمایش بصورت: </Typography>
          <ToggleButtonGroup
            color="primary"
            value={view}
            exclusive
            onChange={handleChange}
          >
            <ToggleButton value="new">پرونده ای</ToggleButton>
            <ToggleButton value="contradictions">گزارش مغایرت</ToggleButton>
            <ToggleButton value="atlas">با جزئیات</ToggleButton>
            <ToggleButton value="killdetail">جزئیات کشتار و پخش</ToggleButton>
            <ToggleButton value="killhouseSurveillance">
              جزئیات پایش کشتارگاه
            </ToggleButton>
          </ToggleButtonGroup>
        </Grid>
      </Grid>
      <Grid container xs={12}>
        {view === "atlas" && <ProvinceCaseStatusComponent />}
        {view === "new" && <ProvinceCases />}
        {view === "contradictions" && <ProvinceManageContradictions />}
        {view === "killdetail" && <ProvinceKillbroadcastInDetail />}
        {view === "killhouseSurveillance" && <ProvinceSlaughterSurveillance />}
      </Grid>
    </Grid>
  );
};
