import { Button, CircularProgress, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Grid } from "../../components/grid/Grid";
import { getRoleFromUrl } from "../../utils/getRoleFromUrl";

export const KillProcessKillhouseVetStats = ({ province }) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const { authToken } = useSelector((state) => state.userSlice);

  useEffect(() => {
    fetch(
      `${province}kill_house__request_vet_killing_process/?role=${getRoleFromUrl()}`,
      {
        headers: {
          Authorization: `Bearer ${authToken}`,
        },
      }
    )
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
        setLoading(false);
      });
  }, []);

  return (
    <>
      {loading ? (
        <CircularProgress />
      ) : (
        <Grid container direction="column" className="stats-wrap">
          <Typography my={2} className="stats-title" fontWeight={"bold"}>
            کشتارگاه
          </Typography>
          <Grid
            container
            className="stats-content"
            direction="column"
            alignItems="start"
          >
            <Typography>
              بار تخلیه شده: {data?.vet_check_counter?.toLocaleString()} بار
            </Typography>
            <Typography>
              تعداد: {data?.kill_house_quantity?.toLocaleString()} قطعه
            </Typography>
            <Typography>
              وزن : {data?.kill_house_request_weight?.toLocaleString()} کیلوگرم
            </Typography>
            <Button fullWidth variant="outlined" style={{ marginTop: "10px" }}>
              دانلود اکسل
            </Button>
          </Grid>
        </Grid>
      )}
    </>
  );
};
