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

  useEffect(() => {
    fetch(
      `${province}total_poultry_hatching_dashboard/?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);
      });
  }, [province]);

  return (
    <>
      {loading ? (
        <CircularProgress />
      ) : (
        <Grid
          container
          direction="column"
          justifyContent="center"
          alignItems="center"
        >
          {/* <img
            src="https://th.bing.com/th/id/OIG.Zkflu_eBoMyw9KthSwRp?w=270&h=270&c=6&r=0&o=5&pid=ImgGn"
            width={200}
          /> */}
          <Typography my={2} fontWeight={"bold"}>
            فارم های فعال
          </Typography>
          <Grid container direction="column" alignItems="start">
            <Typography color="primary" variant="body2" mb={1}>
              تعداد فارم: {data?.poultry_counts?.toLocaleString()} واحد
            </Typography>
            <Typography color="primary" variant="body2" mb={1}>
              جوجه ریزی:{" "}
              {data?.total_poultry_hatchings_quantity?.toLocaleString()} قطعه
            </Typography>
            <Typography color="primary" variant="body2" mb={1}>
              تلفات (10٪): {data?.losses?.toLocaleString()} قطعه
            </Typography>
            <Typography color="primary" variant="body2" mb={1}>
              کشتار شده:{" "}
              {data?.total_kill_house_request_quantity?.toLocaleString()} قطعه
            </Typography>
            <Typography color="primary" variant="body2" mb={1}>
              مانده در سالن:{" "}
              {data?.total_poultry_hatchings_left?.toLocaleString()} قطعه
            </Typography>
          </Grid>
        </Grid>
      )}
    </>
  );
};
