import { useEffect, useState } from "react";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import { useDispatch } from "react-redux";
import { DashboardProvinceDetailsForMap } from "../../services/dashboard-province-details-for-map";

const NationalMapSumTotal = () => {
  const [data, setData] = useState({
    totalQuantity: 0,
    totalLeftOver: 0,
    totalKilledQuantity: 0,
    totalHatchingLeftOverPercent: 0,
    totalActiveLeft: 0,
    totalActiveLeftPercent: 0,
  });
  const dispatch = useDispatch();

  const fetchData = () => {
    dispatch(DashboardProvinceDetailsForMap()).then((r) => {
      if (r.payload?.data) {
        setData(r.payload.data);
      }
    });
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <Grid
      sx={{
        display: "flex",
        flexDirection: "row",
        border: "1px solid #A8A8A8",
        borderRadius: "20px",
        padding: "10px",
        maxHeight: "156px",
        marginTop: "20px",
        backgroundColor: "white",
        flexWrap: "wrap",
      }}
    >
      <Grid item sx={{ marginTop: "10px", display: "flex" }}>
        <Typography
          sx={{ color: "#717171", fontWeight: "600", fontSize: "12px" }}
        >
          حجم کل جوجه ریزی:
        </Typography>
        <Typography
          sx={{
            color: "#333",
            fontWeight: "700",
            fontSize: "12px",
            marginLeft: "10px",
          }}
        >
          {data?.totalQuantity.toLocaleString()} قطعه
        </Typography>
      </Grid>
      <Grid
        item
        sx={{ marginTop: "10px", display: "flex", marginRight: "10px" }}
      >
        <Typography
          sx={{
            color: "#717171",
            fontWeight: "600",
            fontSize: "12px",
            marginLeft: "10px",
          }}
        >
          حجم مانده در سالن:
        </Typography>
        <Typography
          sx={{
            color: "#333",
            fontWeight: "700",
            fontSize: "12px",
            marginLeft: "10px",
          }}
        >
          {data?.totalLeftOver?.toLocaleString()} قطعه
        </Typography>
      </Grid>
      <Grid item sx={{ marginTop: "10px", display: "flex" }}>
        <Typography
          sx={{
            color: "#333",
            fontWeight: "700",
            fontSize: "12px",
            marginLeft: "10px",
          }}
        >
          حجم کل کشتار شده:
        </Typography>
        <Typography
          sx={{
            color: "#333",
            fontWeight: "700",
            fontSize: "12px",
            marginLeft: "10px",
          }}
        >
          {data?.totalKilledQuantity.toLocaleString()}
        </Typography>
      </Grid>

      <Grid item sx={{ marginTop: "10px", display: "flex" }}>
        <Typography
          sx={{
            color: "#333",
            fontWeight: "700",
            fontSize: "12px",
            marginLeft: "10px",
          }}
        >
          درصد مانده در سالن :
        </Typography>
        <Grid sx={{ display: "flex", alignItems: "center" }}>
          <Grid
            sx={{
              borderRadius: "8px",
              marginLeft: "5px",
            }}
          />
          <Typography
            sx={{
              color: "#333",
              fontWeight: "700",
              fontSize: "12px",
            }}
          >
            {data?.totalHatchingLeftOverPercent}%
          </Typography>
        </Grid>
      </Grid>

      <Grid item sx={{ marginTop: "10px", display: "flex" }}>
        <Typography
          sx={{
            color: "#333",
            fontWeight: "700",
            fontSize: "12px",
            marginLeft: "10px",
          }}
        >
          درصد آماده کشتار:
        </Typography>
        <Grid sx={{ display: "flex", alignItems: "center" }}>
          <Grid
            sx={{
              borderRadius: "8px",
              marginLeft: "5px",
            }}
          />
          <Typography
            sx={{
              color: "#333",
              fontWeight: "700",
              fontSize: "12px",
              marginLeft: "10px",
            }}
          >
            {data.totalActiveLeftPercent}%
          </Typography>
        </Grid>
      </Grid>
    </Grid>
  );
};

export default NationalMapSumTotal;
