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

  useEffect(() => {
    fetch(
      `${province}total_system_user_profile_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.JoS6NDqYLNkGe7lu8THQ?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?.users?.toLocaleString()}
            </Typography>
            <Typography color="primary" variant="body2" mb={1}>
              مرغداران: {data?.poultries?.toLocaleString()}
            </Typography>
            <Typography color="primary" variant="body2" mb={1}>
              اصناف: {data?.guilds?.toLocaleString()}
            </Typography>
          </Grid>
        </Grid>
      )}
    </>
  );
};
