import { Card, CardActionArea, CardContent, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import ChartBar from "../../../../components/chart-bar/ChartBar";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { PropTypes } from "prop-types";
import { formatJustDate } from "../../../../utils/formatTime";
import ChartLinear from "../../../../components/chart-linear/ChartLenear";

export const AvicultureReportsCharts = ({ data }) => {
  const [hatching, setHatching] = useState({ datasets: [] });
  const [hatchingWeight, setHatchingWeight] = useState({ datasets: [] });

  useEffect(() => {
    setHatching({
      labels: data?.hatchingChart?.map((data) => formatJustDate(data?.date)),
      datasets: [
        {
          label: "تعداد",
          backgroundColor: ["rgba(33, 72, 214, 0.7)"],
          data: data?.hatchingChart?.map((data) => data?.quantity),
          borderRadius: 5,
        },
        {
          label: "تلفات",
          backgroundColor: ["rgba(100, 130, 160, 0.7)"],
          data: data.hatchingChart?.map((data) => data?.losses),
          borderRadius: 5,
        },
      ],
    });

    setHatchingWeight({
      labels: data?.weightChart?.map((data) => formatJustDate(data?.date)),
      datasets: [
        {
          label: "قیمت",
          backgroundColor: ["rgba(33, 72, 214, 0.7)"],
          data: data?.weightChart?.map((data) => data?.weight),
          borderRadius: 5,
        },
      ],
    });
  }, []);

  return (
    <Grid mb={SPACING.LARGE}>
      <Grid
        container
        mt={SPACING.MEDIUM}
        gap={SPACING.SMALL}
        justifyContent="space-between"
      >
        <Card sx={{ width: "45%" }}>
          <CardActionArea>
            <CardContent>
              <Typography gutterBottom variant="body1">
                نمودار حجم جوجه ریزی و تلفات دوره
              </Typography>

              <ChartBar chartData={hatching} />
            </CardContent>
          </CardActionArea>
        </Card>

        <Card sx={{ width: "45%" }}>
          <CardActionArea>
            <CardContent>
              <Typography gutterBottom variant="body1">
                نمودار پایش وزن و بهره وری وزن
              </Typography>

              <ChartLinear chartData={hatchingWeight} />
            </CardContent>
          </CardActionArea>
        </Card>
      </Grid>
    </Grid>
  );
};

AvicultureReportsCharts.propTypes = {
  data: PropTypes.any,
};