import { Grid } from "../grid/Grid";
import pelakImg from "../../assets/images/pelak.jpg";
import { FormControl, MenuItem, Select, TextField } from "@mui/material";
import { SPACING } from "../../data/spacing";
import { useFormik } from "formik";
import { Yup } from "../../lib/yup/yup";
import { PropTypes } from "prop-types";
import { useEffect, useState } from "react";

export const CarPelak = ({ handleChange, pelakState, pelakInitial }) => {
  const formik = useFormik({
    initialValues: {
      driver_name: "",
      driver_mobile: "",
      type_car: "ایسوزو",
      type_weight: "سنگین",
      capocity: "",
      pelak1: pelakInitial?.split(" ")[0] ? pelakInitial?.split(" ")[0] : "",
      pelak2: pelakInitial?.split(" ")[1] ? pelakInitial?.split(" ")[1] : "",
      pelak3: pelakInitial?.split(" ")[2] ? pelakInitial?.split(" ")[2] : "",
      pelak4: pelakInitial?.split(" ")[3] ? pelakInitial?.split(" ")[3] : "",
      // 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("لطفا فیلد را به درستی وارد کنید!"),
    }),
  });

  const [flag, setFlag] = useState(true);
  useEffect(() => {
    if (pelakState?.length && flag) {
      setFlag(false);
      const [pelak1, pelak2, pelak3, pelak4] = pelakState;
      formik.setFieldValue("pelak1", pelak1);
      formik.setFieldValue("pelak2", pelak2);
      formik.setFieldValue("pelak3", pelak3);
      formik.setFieldValue("pelak4", pelak4);
    }
  }, [pelakState]);

  useEffect(() => {
    handleChange(
      formik.values.pelak1 ? formik.values.pelak1 : "",
      formik.values.pelak2 ? formik.values.pelak2 : "",
      formik.values.pelak3 ? formik.values.pelak3 : "",
      formik.values.pelak4 ? formik.values.pelak4 : ""
    );
  }, [
    formik.values.pelak1,
    formik.values.pelak2,
    formik.values.pelak3,
    formik.values.pelak4,
  ]);

  return (
    <Grid
      container
      alignItems="center"
      px={SPACING.TINY}
      width="270px"
      height="57px"
      sx={{ background: `url(${pelakImg})`, backgroundSize: "cover" }}
    >
      <Grid mt={1}>
        <TextField
          sx={{ width: "40px" }}
          variant="outlined"
          id="pelak1"
          value={formik.values.pelak1}
          onChange={formik.handleChange}
          inputProps={{
            maxLength: 2,
            style: {
              textAlign: "center",
              fontSize: 24,
              fontWeight: "bold",
              padding: 0,
            },
          }}
        />
      </Grid>
      <Grid container alignItems="center" gap={1.5} pl={0.5} pt={0.5}>
        <Grid container ml={1}>
          <Grid>
            <TextField
              sx={{ width: "60px" }}
              variant="outlined"
              value={formik.values.pelak2}
              id="pelak2"
              onChange={formik.handleChange}
              inputProps={{
                maxLength: 3,
                style: {
                  textAlign: "center",
                  fontSize: 24,
                  fontWeight: "bold",
                  padding: 0,
                },
              }}
            />
          </Grid>
        </Grid>
        <Grid>
          {/* <TextField
            sx={{ width: "50px" }}
            variant="outlined"
            id="pelak3"
            value={formik.values.pelak3}
            onChange={formik.handleChange}
            inputProps={{
              maxLength: 1,
              style: {
                textAlign: "center",
                fontSize: 24,
                fontWeight: "bold",
                padding: 0,
              },
            }}
          /> */}
          <FormControl variant="outlined">
            <Select
              SelectDisplayProps={{
                style: {
                  paddingTop: 0,
                  paddingBottom: 0,
                  width: "10px",
                },
              }}
              sx={{
                textAlign: "center",
                fontSize: 24,
                fontWeight: "bold",
              }}
              labelId="demo-simple-select-label"
              id="pelak3"
              name="pelak3"
              value={formik.values.pelak3}
              onChange={formik.handleChange}
              error={
                formik.touched.pelak3 ? Boolean(formik.errors.pelak3) : null
              }
              onBlur={formik.handleBlur}
              helperText={
                formik.touched.pelak3 && Boolean(formik.errors.pelak3)
                  ? formik.errors.pelak3
                  : 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>
        </Grid>
        <Grid container>
          <Grid>
            <TextField
              sx={{ width: "40px" }}
              variant="outlined"
              id="pelak4"
              value={formik.values.pelak4}
              onChange={formik.handleChange}
              inputProps={{
                maxLength: 2,
                style: {
                  textAlign: "center",
                  fontSize: 24,
                  fontWeight: "bold",
                  padding: 0,
                },
              }}
            />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};

CarPelak.propTypes = {
  pelak1: PropTypes.number,
  pelak2: PropTypes.number,
  pelak3: PropTypes.number,
  pelak4: PropTypes.number,
  handleChange: PropTypes.any,
};
