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

export const DistributeOfCarcasses = ({ province }) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch(
      `${province}steward_guilds_allocations_for_statistical_profile/?date=${moment(
        new Date()
      ).format("YYYY-MM-DD")}&?role=${getRoleFromUrl()}`,
      {}
    )
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
        setLoading(false);
      });
  }, [province]);

  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?.allocations?.toLocaleString()} بار
            </Typography>
            <Typography>
              حجم لاشه: {data?.real_number_of_carcasses?.toLocaleString()} قطعه
            </Typography>
            <Typography>
              وزن لاشه : {data?.real_weight_of_carcasses?.toLocaleString()}{" "}
              کیلوگرم
            </Typography>
            <Button fullWidth variant="outlined" style={{ marginTop: "10px" }}>
              دانلود اکسل
            </Button>
          </Grid>
        </Grid>
      )}
    </>
  );
};
