// import { IconButton, Tooltip } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useFormik } from "formik";
import { Yup } from "../../../../lib/yup/yup";
import moment from "moment";
import // DRAWER,

"../../../../lib/redux/slices/appSlice";
// import { AvicultureNewHatching } from "../aviculture-new-hatching/AvicultureNewHatching";
import { avicultureGetHatchings } from "../../services/aviculture-get-hatchings";
import { useState } from "react";
// import DeleteIcon from "@mui/icons-material/Delete";
// import { avicultureDeleteHatching } from "../../services/aviculture-delete-hatching";
// import { useContext } from "react";
// import { AppContext } from "../../../../contexts/AppContext";
// import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import Tour from "reactour";
import { formatJustDate } from "../../../../utils/formatTime";
import ResponsiveTable from "../../../../components/responsive-table/ResponsiveTable";

const steps = [
  {
    selector: ".first-step",
    content: () => <div>برای ثبت جوجه ریزی اینجا کلیک کنید!</div>,
  },
  {
    selector: ".second",
    content: () => (
      <div>در این قسمت جوجه ریزی های ثبت شده توسط شما نمایش داده می شود.</div>
    ),
  },
];

export const AvicultureHatching = () => {
  const dispatch = useDispatch();
  // const [openNotif] = useContext(AppContext);
  const { avicultureHatchings } = useSelector((state) => state.avicultureSlice);
  const [isTourOpen, setIsTourOpen] = useState(false);
  const [dataTable, setDataTable] = useState([]);

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

  useEffect(() => {
    const d = avicultureHatchings?.map((item, i) => {
      const killedNumber = item.quantity - item.losses - item.leftOver;
      return [
        i + 1,
        item.allowHatching === "pending" ? "فعال" : "بایگانی شده",
        item.poultry.unitName,
        item.hall,
        item.period,
        formatJustDate(item?.createDate),
        formatJustDate(item?.date),
        item.breed.map((item) => {
          const title = `${item.breed} (${item.mainQuantity} قطعه)`;
          return <p key={item?.createDate}>{title}</p>;
        }),
        item.age,
        item.quantity,
        `${item.losses} (%${((item.losses * 100) / item.quantity).toFixed(0)})`,
        killedNumber +
          ` (%${((killedNumber * 100) / item.quantity).toFixed(0)})`,
        `${item.leftOver} (%${((item.leftOver * 100) / item.quantity).toFixed(
          0
        )})`,
        // item.allowHatching === "pending" ? (
        //   <Tooltip key={i} title={"حذف جوجه ریزی"} placement="left-start">
        //     <IconButton
        //       aria-label="delete"
        //       color="error"
        //       onClick={() => {
        //         dispatch(LOADING_START());
        //         dispatch(avicultureDeleteHatching(item.key)).then((r) => {
        //           dispatch(LOADING_END());
        //           if (r.error) {
        //             if (r.error.message.includes("403")) {
        //               openNotif({
        //                 vertical: "top",
        //                 horizontal: "center",
        //                 msg: "برای این جوجه ریزی درخواست کشتار ثبت شده است!",
        //                 severity: "error",
        //               });
        //             } else if (r.error.message.includes("400")) {
        //               openNotif({
        //                 vertical: "top",
        //                 horizontal: "center",
        //                 msg: "برای این جوجه ریزی بازرسی ثبت شده است!",
        //                 severity: "error",
        //               });
        //             } else {
        //               openNotif({
        //                 vertical: "top",
        //                 horizontal: "center",
        //                 msg: "مشکلی پیش آمده است!",
        //                 severity: "error",
        //               });
        //             }
        //           } else {
        //             dispatch(avicultureGetHatchings());
        //             openNotif({
        //               vertical: "top",
        //               horizontal: "center",
        //               msg: "عملیات با موفقیت انجام شد.",
        //               severity: "success",
        //             });
        //           }
        //         });
        //       }}
        //     >
        //       <DeleteIcon />
        //     </IconButton>
        //   </Tooltip>
        // ) : (
        //   "-"
        // ),
      ];
    });

    setDataTable(d);
  }, [avicultureHatchings]);

  const formik = useFormik({
    initialValues: {
      noChicken: "",
      slaughterDate: moment(Date()).format("YYYY-MM-DD hh:mm:ss"),
      race: "آرین",
      weight: "",
    },
    validationSchema: Yup.object({
      noChicken: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا عدد وارد کنید!"),
      weight: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا وزن را وارد کنید!"),
    }),
  });

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

  return (
    <Grid container gap={SPACING.MEDIUM} direction="column" xs={12}>
      <Grid
        container
        gap={SPACING.SMALL}
        justifyContent={{ xs: "center", lg: "space-between" }}
        alignSelf="center"
        alignItems="center"
        xs={12}
        direction={{ xs: "column", lg: "row" }}
      >
        <Grid
          container
          xs={12}
          alignItems={"start"}
          gap={SPACING.SMALL}
          direction={"column"}
        >
          <Grid
            width="100%"
            container
            alignItems="center"
            justifyContent="space-between"
          >
            {/* <Grid>
              <Button
                className="first-step"
                variant={"contained"}
                            disabled={true}
                onClick={() => {
                  dispatch(
                    DRAWER({
                      title: "ثبت اطلاعات جوجه ریزی",
                      right: !(window.innerWidth <= 600),
                      bottom: window.innerWidth <= 600,
                      content: <AvicultureNewHatching />,
                    })
                  );
                }}
              >
                ثبت جوجه ریزی جدید
              </Button>
            </Grid> */}

            <Grid>
              {/* <Button
                onClick={() => setIsTourOpen(!isTourOpen)}
                variant="outlined"
                endIcon={<HelpOutlineIcon />}
              >
                راهنما
              </Button> */}
            </Grid>
          </Grid>
          <Tour
            steps={steps}
            isOpen={isTourOpen}
            onRequestClose={() => setIsTourOpen(false)}
            styles={{
              popover: (base) => ({
                ...base,
                borderRadius: "10px",
                "--reactor-accent": "red",
              }),
            }}
          />
          <Grid width="100%" className="second">
            <ResponsiveTable
              paginated
              title="دوره های جوجه ریزی"
              data={dataTable}
              columns={[
                "ردیف",
                "وضعیت",
                "نام فارم",
                "سالن",
                "دوره جوجه ریزی",
                "تاریخ ثبت جوجه ریزی",
                "تاریخ جوجه ریزی",
                "نژاد",
                "سن",
                "تعداد جوجه ریزی",
                "تلفات دوره",
                "کشتار شده",
                "مانده برای کشتار",
                // "اقدام",
              ]}
              customColors={[{ name: "وضعیت", color: "green" }]}
            />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};
