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 KillProcessKillRequestStats = ({ province }) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const { authToken } = useSelector((state) => state.userSlice);

  useEffect(() => {
    fetch(
      `${province}poultry_request_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?.poultry_quantity?.toLocaleString()} فارم
            </Typography>
            <Typography>
              تعداد: {data?.poultry_request_quantity?.toLocaleString()} قطعه
            </Typography>
            <Typography>
              وزن : {data?.poultry_request_index_weight?.toLocaleString()}{" "}
              کیلوگرم
            </Typography>
            <a
              href={`${province}total_poultry_request_dashboard_excel/`}
              target="_blank"
              rel="noreferrer"
              style={{ width: "100%" }}
            >
              <Button
                fullWidth
                variant="outlined"
                style={{ marginTop: "10px" }}
              >
                دانلود اکسل
              </Button>
            </a>
          </Grid>
        </Grid>
      )}
    </>
  );
};
