import {
  Button,
  FormControl,
  Grid,
  IconButton,
  InputLabel,
  MenuItem,
  Select,
  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 { AppContext } from "../../../../contexts/AppContext";
import { useContext } from "react";
import SearchIcon from "@mui/icons-material/Search";
import { useState } from "react";
import { provinceGetDriverByHealthCode } from "../../services/province-get-driver-by-health-code";
import { provinceSubmitCar } from "../../services/province-submit-car";
import { provinceGetCars } from "../../services/province-get-cars";
import { provinceRemoveCar } from "../../services/province-remove-car";
import { NumberInput } from "../../../../components/number-format-custom/NumberFormatCustom";

export const ProvinceRegisterCar = () => {
  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: "",
      pelak1: "33",
      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("لطفا فیلد را به درستی وارد کنید!"),
      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.setFieldValue("pelak2", "الف");
    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(
                          provinceGetDriverByHealthCode(
                            formik2.values.health_code_check
                          )
                        ).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 {
                            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",
                              });
                              setUserExist(false);
                              formik.setFieldValue(
                                "health_code",
                                formik2.values.health_code_check
                              );
                            }
                          }

                          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>
                      <Button
                        fullWidth
                        color="error"
                        variant="outlined"
                        onClick={() => {
                          dispatch(LOADING_START());
                          dispatch(provinceRemoveCar(userData.key)).then(
                            (r) => {
                              dispatch(LOADING_END());
                              if (r.error) {
                                openNotif({
                                  vertical: "top",
                                  horizontal: "center",
                                  msg: "مشکلی پیش آمده است!",
                                  severity: "error",
                                });
                              } else {
                                dispatch(provinceGetCars());
                                dispatch(
                                  DRAWER({
                                    right: false,
                                    bottom: false,
                                    content: null,
                                  })
                                );
                                openNotif({
                                  vertical: "top",
                                  horizontal: "center",
                                  msg: "عملیات با موفقیت انجام شد.",
                                  severity: "success",
                                });
                              }
                            }
                          );
                        }}
                      >
                        حذف خودرو
                      </Button>
                    </Grid>
                  </>
                ) : (
                  <>
                    <Typography>مشخصات خودرو جدید</Typography>
                    <Grid
                      container
                      mt={SPACING.SMALL}
                      gap={SPACING.SMALL}
                      alignSelf="center"
                      direction={{ xs: "column", sm: "row" }}
                    >
                      <TextField
                        fullWidth
                        id="driver_name"
                        label="نام و نام خانوادگی راننده"
                        variant="outlined"
                        value={formik.values.driver_name}
                        error={
                          formik.touched.driver_name
                            ? Boolean(formik.errors.driver_name)
                            : null
                        }
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        helperText={
                          formik.touched.driver_name &&
                          Boolean(formik.errors.driver_name)
                            ? formik.errors.driver_name
                            : null
                        }
                      />

                      <TextField
                        fullWidth
                        id="driver_mobile"
                        label="شماره تماس راننده"
                        variant="outlined"
                        value={formik.values.driver_mobile}
                        error={
                          formik.touched.driver_mobile
                            ? Boolean(formik.errors.driver_mobile)
                            : null
                        }
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        helperText={
                          formik.touched.driver_mobile &&
                          Boolean(formik.errors.driver_mobile)
                            ? formik.errors.driver_mobile
                            : null
                        }
                      />

                      <FormControl fullWidth>
                        <InputLabel id="demo-simple-select-label">
                          مدل خودرو
                        </InputLabel>
                        <Select
                          labelId="demo-simple-select-label"
                          id="type_car"
                          label="مدل خودرو"
                          value={formik.values.type_car}
                          onChange={(e) => {
                            formik.setFieldValue("type_car", e.target.value);
                          }}
                          error={
                            formik.touched.type_car
                              ? Boolean(formik.errors.type_car)
                              : null
                          }
                          onBlur={formik.handleBlur}
                          helperText={
                            formik.touched.type_car &&
                            Boolean(formik.errors.type_car)
                              ? formik.errors.type_car
                              : null
                          }
                        >
                          <MenuItem value={"ایسوزو"}>ایسوزو</MenuItem>
                          <MenuItem value={"نیسان"}>نیسان</MenuItem>
                          <MenuItem value={"وانت"}>وانت</MenuItem>
                          <MenuItem value={"اف ام"}>اف ام</MenuItem>
                          <MenuItem value={"کامیون"}>کامیون</MenuItem>
                          <MenuItem value={"هیوندا کروس"}>هیوندا کروس</MenuItem>
                          <MenuItem value={"بادسان"}>بادسان</MenuItem>
                          <MenuItem value={"هیوندا"}>هیوندا</MenuItem>
                          <MenuItem value={"کامیونت ایسوزو"}>
                            کامیونت ایسوزو
                          </MenuItem>
                          <MenuItem value={"خاور بنز"}>خاور بنز</MenuItem>
                        </Select>
                      </FormControl>
                      <NumberInput
                        allowLeadingZeros
                        thousandSeparator=","
                        fullWidth
                        id="capocity"
                        label="ظرفیت خودرو (قطعه)"
                        variant="outlined"
                        value={formik.values.capocity}
                        error={
                          formik.touched.capocity
                            ? Boolean(formik.errors.capocity)
                            : null
                        }
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        helperText={
                          formik.touched.capocity &&
                          Boolean(formik.errors.capocity)
                            ? formik.errors.capocity
                            : null
                        }
                      />

                      {/* <TextField
                  fullWidth
                  id="name"
                  label="توضیحات"
                  variant="outlined"
                  value={formik.values.name}
                  error={formik.touched.name ? Boolean(formik.errors.name) : null}
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                  helperText={
                    formik.touched.name && Boolean(formik.errors.name)
                      ? formik.errors.name
                      : null
                  }
                /> */}
                      <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
                        }
                      />
                    </Grid>
                    <Typography>مشخصات پلاک</Typography>
                    <Grid
                      mt={SPACING.SMALL}
                      gap={1}
                      spacing={1}
                      sx={{ display: "flex", flexDirection: "row" }}
                    >
                      <FormControl>
                        <InputLabel id="demo-simple-select-label">
                          حرف
                        </InputLabel>
                        <Select
                          labelId="demo-simple-select-label"
                          id="pelak2"
                          label="الف"
                          value={formik.values.pelak2}
                          onChange={(e) => {
                            formik.setFieldValue("pelak2", e.target.value);
                          }}
                          error={
                            formik.touched.pelak2
                              ? Boolean(formik.errors.pelak2)
                              : null
                          }
                          onBlur={formik.handleBlur}
                          helperText={
                            formik.touched.pelak2 &&
                            Boolean(formik.errors.pelak2)
                              ? formik.errors.pelak2
                              : null
                          }
                        >
                          <MenuItem value={"الف"}>الف</MenuItem>
                          <MenuItem value={"ب"}>ب</MenuItem>
                          <MenuItem value={"پ"}>پ</MenuItem>
                          <MenuItem value={"ت"}>ت</MenuItem>
                          <MenuItem value={"ث"}>ث</MenuItem>
                          <MenuItem value={"ج"}>ج</MenuItem>
                          <MenuItem value={"چ"}>چ</MenuItem>
                          <MenuItem value={"ح"}>ح</MenuItem>
                          <MenuItem value={"خ"}>خ</MenuItem>
                          <MenuItem value={"د"}>د</MenuItem>
                          <MenuItem value={"ر"}>ر</MenuItem>
                          <MenuItem value={"ز"}>ز</MenuItem>
                          <MenuItem value={"ژ"}>ژ</MenuItem>
                          <MenuItem value={"س"}>س</MenuItem>
                          <MenuItem value={"ش"}>ش</MenuItem>
                          <MenuItem value={"ص"}>ص</MenuItem>
                          <MenuItem value={"ض"}>ض</MenuItem>
                          <MenuItem value={"ط"}>ط</MenuItem>
                          <MenuItem value={"ظ"}>ظ</MenuItem>
                          <MenuItem value={"ع"}>ع</MenuItem>
                          <MenuItem value={"غ"}>غ</MenuItem>
                          <MenuItem value={"ف"}>ف</MenuItem>
                          <MenuItem value={"ق"}>ق</MenuItem>
                          <MenuItem value={"ک"}>ک</MenuItem>
                          <MenuItem value={"گ"}>گ</MenuItem>
                          <MenuItem value={"ل"}>ل</MenuItem>
                          <MenuItem value={"م"}>م</MenuItem>
                          <MenuItem value={"ن"}>ن</MenuItem>
                          <MenuItem value={"و"}>و</MenuItem>
                          <MenuItem value={"ه"}>ه</MenuItem>
                          <MenuItem value={"ی"}>ی</MenuItem>
                        </Select>
                      </FormControl>

                      <TextField
                        id="pelak1"
                        label="۳۱"
                        variant="outlined"
                        value={formik.values.pelak1}
                        error={
                          formik.touched.pelak1
                            ? Boolean(formik.errors.pelak1)
                            : null
                        }
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        helperText={
                          formik.touched.pelak1 && Boolean(formik.errors.pelak1)
                            ? formik.errors.pelak1
                            : null
                        }
                      />
                    </Grid>
                    <Grid
                      justifyContent={"center"}
                      gap={1}
                      container
                      spacing={1}
                    >
                      <TextField
                        sx={{ width: "50px" }}
                        id="pelak4"
                        label="۱۱"
                        variant="outlined"
                        value={formik.values.pelak4}
                        onChange={(e) => {
                          formik.setFieldValue("pelak4", e.target.value);
                        }}
                        error={
                          formik.touched.pelak4
                            ? Boolean(formik.errors.pelak4)
                            : null
                        }
                        onBlur={formik.handleBlur}
                        helperText={
                          formik.touched.pelak4 && Boolean(formik.errors.pelak4)
                            ? formik.errors.pelak4
                            : null
                        }
                      />

                      <TextField
                        fullWidth
                        sx={{ width: "100px" }}
                        id="pelak3"
                        label="۱۲۳"
                        variant="outlined"
                        value={formik.values.pelak3}
                        error={
                          formik.touched.pelak3
                            ? Boolean(formik.errors.pelak3)
                            : null
                        }
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        helperText={
                          formik.touched.pelak3 && Boolean(formik.errors.pelak3)
                            ? formik.errors.pelak3
                            : null
                        }
                      />
                    </Grid>
                    <Button
                      fullWidth
                      color="primary"
                      variant="contained"
                      disabled={userKey ? !formik2.isValid : !formik.isValid}
                      startIcon={<SendIcon />}
                      onClick={() => {
                        dispatch(LOADING_START());
                        dispatch(
                          provinceSubmitCar({
                            city_name: "کرمانشاه",
                            province_name: "کرمانشاه",
                            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: formik2.values.health_code_check,
                            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 {
                            openNotif({
                              vertical: "top",
                              horizontal: "center",
                              msg: "عملیات با موفقیت انجام شد.",
                              severity: "success",
                            });
                            dispatch(
                              DRAWER({
                                right: false,
                                bottom: false,
                                content: null,
                              })
                            );
                          }
                          dispatch(provinceGetCars());
                          dispatch(LOADING_END());
                        });
                      }}
                    >
                      ثبت اطلاعات
                    </Button>
                  </>
                )}
              </>
            )}
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};
