import { Button, Chip, Divider, TextField, Typography } from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
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 { useFormik } from "formik";
import { Yup } from "../../../../lib/yup/yup";
import { useDispatch, useSelector } from "react-redux";
import { adminGetHatchingByPeriod } from "../../services/admin-get-hatching-by-period";
import {
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import moment from "moment";
import { EMPTY_HATCHING } from "../../../../lib/redux/slices/adminSlice";
import { formatJustDate } from "../../../../utils/formatTime";

export const AdminHatchingByPeriod = () => {
  const dispatch = useDispatch();

  const { hatchingByPeriod } = useSelector((state) => state.adminSlice);

  useEffect(() => {
    dispatch(EMPTY_HATCHING());
  }, []);

  useEffect(() => {
    if (hatchingByPeriod && Array.isArray(hatchingByPeriod)) {
      setHatchingByPeriodData({
        labels: hatchingByPeriod.map((data) => formatJustDate(data?.date)),
        datasets: [
          {
            label: "تعداد",
            backgroundColor: ["rgba(33, 72, 214, 0.7)"],
            data: hatchingByPeriod.map((data) => data?.quantity || 0),
            borderRadius: 5,
          },
          {
            label: "تلفات",
            backgroundColor: ["rgba(100, 130, 160, 0.7)"],
            data: hatchingByPeriod.map((data) => data?.losses || 0),
            borderRadius: 5,
          },
          // {
          //   type: "line",
          //   label: "مقدار استاندارد",
          //   backgroundColor: ["rgba(0, 120, 10, 0.7)"],
          //   data: [
          //     2500, 2500, 2500, 2500, 2500, 2500, 2500, 2500, 2500, 2500, 2500,
          //     2500,
          //   ],
          // },
        ],
      });
    }
  }, [hatchingByPeriod?.length]);

  const [hatchingByPeriodData, setHatchingByPeriodData] = useState({
    datasets: [],
  });

  const formik = useFormik({
    initialValues: {
      periodfrom: moment(Date()).format("YYYY-MM-DD"),
      periodto: moment(Date()).format("YYYY-MM-DD"),
      chickenAge: "5",
    },
    validationSchema: Yup.object({
      periodfrom: Yup.string()
        .typeError("لطفا فیلد را به درستی وارد کنید.!")
        .required("این فیلد اجباری است!"),
      periodto: Yup.string()
        .typeError("لطفا فیلد را به درستی وارد کنید.!")
        .required("این فیلد اجباری است!"),
      chickenAge: Yup.number()
        .typeError("لطفا فیلد را به صورت عددی وارد کنید.!")
        .required("این فیلد اجباری است!")
        .test("len", "سن مرغ را در بازه 45 روزه وارد کنید", (val, context) => {
          if (context.originalValue) {
            return context.originalValue <= 45 && context.originalValue > 0;
          }
        }),
    }),
  });

  const chartTooltipData = (data) => {
    if (!data || !data.parsed || typeof data.parsed.x === "undefined") {
      return "";
    }

    const index = data.parsed.x;

    if (!data?.dataset?.label) {
      return "";
    }

    if (data.dataset.label === "تلفات") {
      return "مرغداری صداقت با مقدار 2000 در تاریخ 1400/02/03";
    } else if (data.dataset.label === "مقدار استاندارد") {
      return `میزان استاندارد جوجه ریزی در روز ${
        data?.formattedValue || ""
      } عدد میباشد`;
    } else {
      const hatchingItem = hatchingByPeriod?.[index];
      if (!hatchingItem || !Array.isArray(hatchingItem?.poultry)) {
        return "";
      }
      return hatchingItem.poultry
        .map(
          (poultryData, i) =>
            i +
            1 +
            "- مرغداری " +
            (poultryData?.unitname || "") +
            " از استان " +
            (poultryData?.province || "") +
            " شهر " +
            (poultryData?.city || "")
        )
        .join(", ");
    }
  };

  const chartTooltipTitle = (data) => {
    if (!data?.dataset?.label) {
      return "";
    }

    if (data.dataset.label === "تلفات") {
      return "تلفات برای این مرغداری ها ثبت شده است";
    } else if (data.dataset.label === "مقدار استاندارد") {
      return "لاین کنترلی";
    } else {
      return "جوجه ریزی ها توسط این مرغداری ها ثبت شده است";
    }
  };

  const [dataObject, setDataObject] = useState({
    date1: "",
    date2: "",
    age: "",
  });

  useEffect(() => {
    setDataObject({
      date1: formik.values.periodfrom,
      date2: formik.values.periodto,
      age: formik.values.chickenAge,
    });
  }, [formik.values]);

  const options = {
    plugins: {
      tooltip: {
        callbacks: {
          title: (data) => {
            if (!data || !Array.isArray(data) || !data[0]) {
              return "";
            }
            return chartTooltipTitle(data[0]);
          },
          label: (data) => {
            if (!data) {
              return "";
            }
            return chartTooltipData(data);
          },
        },
      },
    },
  };

  useEffect(() => {
    formik.validateForm();
  }, []);

  const isFormvalid = (formik) => {
    const date =
      (new Date(formik.values.periodto) - new Date(formik.values.periodfrom)) /
      (1000 * 60 * 60 * 24);
    if (date > 0 && date <= 30) {
      return false;
    } else {
      return true;
    }
  };

  return (
    <Grid
      sx={{ backgroundColor: "#fff2fd", borderRadius: "25px" }}
      mt={SPACING.SMALL}
      xs={12}
      container
      justifyContent="center"
    >
      <Grid xs={10} lg={10} mb={SPACING.MEDIUM} mt={SPACING.SMALL}>
        <Divider mb={SPACING.SMALL}>
          <Chip label="پیش بینی جوجه ریزی" />
        </Divider>
        <Grid
          xs={12}
          sm={12}
          md={12}
          lg={8}
          display="flex"
          mt={SPACING.SMALL}
          mb={SPACING.SMALL}
          gap={SPACING.SMALL}
          alignItems="center"
        >
          <Typography sx={{ width: "100%" }} color="primary" variant="body2">
            دریافت بر اساس بازه دلخواه :
          </Typography>
          <DatePicker
            label="بازه از"
            id="periodfrom"
            renderInput={(params) => <TextField size="small" {...params} />}
            value={formik.values.periodfrom}
            error={
              formik.touched.periodfrom
                ? Boolean(formik.errors.periodfrom)
                : null
            }
            onChange={(e) => {
              formik.setFieldValue(
                "periodfrom",
                moment(e).format("YYYY-MM-DD")
              );
            }}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.periodfrom && Boolean(formik.errors.periodfrom)
                ? formik.errors.periodfrom
                : null
            }
          />

          <DatePicker
            label="تا"
            id="periodto"
            renderInput={(params) => <TextField size="small" {...params} />}
            value={formik.values.periodto}
            error={
              formik.touched.periodto ? Boolean(formik.errors.periodto) : null
            }
            onChange={(e) => {
              formik.setFieldValue("periodto", moment(e).format("YYYY-MM-DD"));
            }}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.periodto && Boolean(formik.errors.periodto)
                ? formik.errors.periodto
                : null
            }
          />

          <TextField
            id="chickenAge"
            size="small"
            label="سن جوجه"
            variant="outlined"
            sx={{ width: "100%" }}
            value={formik.values.chickenAge}
            error={
              formik.touched.chickenAge
                ? Boolean(formik.errors.chickenAge)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.chickenAge && Boolean(formik.errors.chickenAge)
                ? formik.errors.chickenAge
                : null
            }
          />
          <Button
            disabled={isFormvalid(formik)}
            sx={{ width: "100%" }}
            size="small"
            variant="contained"
            onClick={() => {
              dispatch(LOADING_START());
              dispatch(adminGetHatchingByPeriod(dataObject)).then(() => {
                dispatch(LOADING_END());
              });
            }}
          >
            ارسال اطلاعات
          </Button>
        </Grid>
        <ChartBar options={options} chartData={hatchingByPeriodData} />
      </Grid>
    </Grid>
  );
};
