import { Button, Grid, IconButton, TextField, Typography } from "@mui/material";
import { SPACING } from "../../../../data/spacing";
import SendIcon from "@mui/icons-material/Send";
import { useFormik } from "formik";
import { Yup } from "../../../../lib/yup/yup";
import { useEffect } from "react";
import {
  DRAWER,
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import { slaughterNewCar } from "../../services/slaughter-new-car";
import { useDispatch } from "react-redux";
import { slaughterGetCars } from "../../services/slaughter-get-cars";
import { AppContext } from "../../../../contexts/AppContext";
import { useContext } from "react";
import SearchIcon from "@mui/icons-material/Search";
import { slaughterGetDriverByHealthCode } from "../../services/slaughter-get-driver-by-health-code";
import { useState } from "react";

export const SlaughterNewCar = ({ cars, killHouseKey }) => {
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);
  const [userExist, setUserExist] = useState(false);
  const [userData, setUserData] = useState();
  const [userKey, setUserKey] = useState();
  const [userChecked, setUserChecked] = useState(false);

  const formik = useFormik({
    initialValues: {
      driver_name: "",
      driver_mobile: "",
      type_car: "ایسوزو",
      type_weight: "سنگین",
      capocity: "",
      health_code: "",
      pelak1: "",
      pelak2: "الف",
      pelak3: "",
      pelak4: "",
      // name: "",
    },
    validationSchema: Yup.object({
      driver_name: Yup.string()
        .matches(
          /^[ض‌ص‌ث‌ق‌ف‌غ‌ع‌ه‌خ‌خ‌ح‌ج‌چ‌ش‌س‌ی‌ب‌ل‌ا‌ت‌ن‌ن‌م‌ک‌گ‌ظ‌ط‌ز‌ر‌ذ‌د‌و‌پ‌آ‌ژ ]+$/,
          "فقط حروف فارسی وارد کنید"
        )
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
      driver_mobile: Yup.string()
        .test("len", "شماره تلفن باید با 0 شروع شود", (val, context) => {
          return context.originalValue && context.originalValue.startsWith("0");
        })
        .test("len", "شماره تماس 11 رقم باید باشد", (val, context) => {
          if (context.originalValue) {
            return context.originalValue.length === 11;
          }
        })

        .required("این فیلد اجباری است!")
        .typeError("لطفا عدد وارد کنید!"),
      type_weight: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
      capocity: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
      health_code: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
      pelak1: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا عدد وارد کنید!"),
      pelak2: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
      pelak3: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا عدد وارد کنید!"),
      pelak4: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا عدد وارد کنید!"),
      name: Yup.string().typeError("لطفا فیلد را به درستی وارد کنید!"),
    }),
  });

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

  const formik2 = useFormik({
    initialValues: {
      health_code_check: "",
    },
    validationSchema: Yup.object({
      health_code_check: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
    }),
  });

  return (
    <Grid>
      <Grid container gap={SPACING.MEDIUM} direction="column">
        <Grid>
          <Grid container gap={SPACING.SMALL} justifyContent="left">
            {!userChecked && (
              <>
                <Typography>ثبت با کد بهداشتی</Typography>
                <Grid display="flex" width={1}>
                  <TextField
                    fullWidth
                    id="health_code_check"
                    label="کد بهداشتی"
                    variant="outlined"
                    value={formik2.values.health_code_check}
                    error={
                      formik2.touched.health_code_check
                        ? Boolean(formik2.errors.health_code_check)
                        : null
                    }
                    onChange={formik2.handleChange}
                    onBlur={formik2.handleBlur}
                    helperText={
                      formik2.touched.health_code_check &&
                      Boolean(formik2.errors.health_code_check)
                        ? formik2.errors.health_code_check
                        : null
                    }
                  />
                  <IconButton
                    disabled={!formik2.isValid}
                    aria-label="delete"
                    color="primary"
                    onClick={() => {
                      if (formik2.values.health_code_check) {
                        dispatch(LOADING_START());
                        dispatch(
                          slaughterGetDriverByHealthCode(
                            formik2.values.health_code_check
                          )
                        ).then((r) => {
                          if (r.error) {
                            openNotif({
                              vertical: "top",
                              horizontal: "center",
                              msg: "مشکلی پیش آمده است!",
                              severity: "error",
                            });
                          } else {
                            setUserChecked(true);
                            if (r.payload.data[0]) {
                              setUserData(r.payload.data[0]);
                              setUserExist(true);
                              setUserKey(r.payload.data[0]?.key);
                            } else {
                              openNotif({
                                vertical: "top",
                                horizontal: "center",
                                msg: "راننده پیدا نشد!",
                                severity: "error",
                              });
                              dispatch(
                                DRAWER({
                                  right: false,
                                  bottom: false,
                                  content: null,
                                })
                              );
                              setUserExist(false);
                            }
                          }
                          dispatch(LOADING_END());
                        });
                      }
                    }}
                  >
                    <SearchIcon />
                  </IconButton>
                </Grid>
              </>
            )}
            {userChecked && (
              <>
                {userExist ? (
                  <>
                    <Grid
                      container
                      gap={SPACING.SMALL}
                      direction="column"
                      flex="1"
                      height="100%"
                      justifyContent="space-between"
                    >
                      <Grid display="flex">
                        <Typography
                          variant="body1"
                          mr={SPACING.TINY}
                          color={(prop) => prop.palette.grey["A700"]}
                        >
                          نام راننده:
                        </Typography>
                        <Typography mr={SPACING.TINY} fontWeight="bold">
                          {userData.driverName}
                        </Typography>{" "}
                      </Grid>

                      <Grid display="flex">
                        <Typography
                          variant="body1"
                          mr={SPACING.TINY}
                          color={(prop) => prop.palette.grey["A700"]}
                        >
                          موبایل:
                        </Typography>
                        <Typography mr={SPACING.TINY} fontWeight="bold">
                          {userData.driverMobile}
                        </Typography>
                      </Grid>

                      <Grid display="flex">
                        <Typography
                          variant="body1"
                          mr={SPACING.TINY}
                          color={(prop) => prop.palette.grey["A700"]}
                        >
                          خودرو:
                        </Typography>
                        <Typography mr={SPACING.TINY} fontWeight="bold">
                          {userData.typeCar}
                        </Typography>{" "}
                      </Grid>

                      <Grid display="flex">
                        <Typography
                          variant="body1"
                          mr={SPACING.TINY}
                          color={(prop) => prop.palette.grey["A700"]}
                        >
                          پلاک:
                        </Typography>
                        <Typography mr={SPACING.TINY} fontWeight="bold">
                          {userData.pelak}
                        </Typography>{" "}
                      </Grid>

                      <Grid display="flex">
                        <Typography
                          variant="body1"
                          mr={SPACING.TINY}
                          color={(prop) => prop.palette.grey["A700"]}
                        >
                          ظرفیت:
                        </Typography>
                        <Typography mr={SPACING.TINY} fontWeight="bold">
                          {userData.capocity}
                        </Typography>{" "}
                      </Grid>
                    </Grid>
                  </>
                ) : (
                  <>
                    <Typography>خودرو وجود ندارد!</Typography>
                  </>
                )}
                <Button
                  fullWidth
                  color="primary"
                  variant="contained"
                  disabled={userKey ? !formik2.isValid : !formik.isValid}
                  startIcon={<SendIcon />}
                  onClick={() => {
                    dispatch(LOADING_START());
                    if (userKey) {
                      dispatch(
                        slaughterNewCar({
                          driver_key: userKey,
                          kill_house_key: killHouseKey,
                        })
                      ).then((r) => {
                        if (r.error) {
                          if (r.error.message.includes("403")) {
                            openNotif({
                              vertical: "top",
                              horizontal: "center",
                              msg: "این خودرو قبلا برای این کشتارگاه ثبت شده است!",
                              severity: "error",
                            });
                          } else {
                            openNotif({
                              vertical: "top",
                              horizontal: "center",
                              msg: "مشکلی پیش آمده است!",
                              severity: "error",
                            });
                          }
                        } else {
                          dispatch(slaughterGetCars()).then((r) => {
                            openNotif({
                              vertical: "top",
                              horizontal: "center",
                              msg: "عملیات با موفقیت انجام شد.",
                              severity: "success",
                            });

                            dispatch(
                              DRAWER({
                                right: false,
                                bottom: false,
                                content: null,
                              })
                            );
                          });
                        }
                        dispatch(LOADING_END());
                      });
                    } else {
                      dispatch(
                        slaughterNewCar({
                          driver_name: formik.values.driver_name,
                          driver_mobile: formik.values.driver_mobile,
                          type_car: formik.values.type_car,
                          capocity: formik.values.capocity,
                          weight_without_load: "0",
                          health_code: formik.values.health_code,
                          pelak1: formik.values.pelak1,
                          pelak2: formik.values.pelak2,
                          pelak3: formik.values.pelak3,
                          pelak4: formik.values.pelak4,
                          // name: formik.values.name,
                        })
                      ).then((r) => {
                        if (r.error) {
                          openNotif({
                            vertical: "top",
                            horizontal: "center",
                            msg: "مشکلی پیش آمده است!",
                            severity: "error",
                          });
                        } else {
                          dispatch(slaughterGetCars()).then((r) => {
                            openNotif({
                              vertical: "top",
                              horizontal: "center",
                              msg: "عملیات با موفقیت انجام شد.",
                              severity: "success",
                            });

                            dispatch(
                              DRAWER({
                                right: false,
                                bottom: false,
                                content: null,
                              })
                            );
                          });
                        }
                        dispatch(LOADING_END());
                      });
                    }
                  }}
                >
                  ثبت اطلاعات
                </Button>
              </>
            )}
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};
