import {
  Button,
  Chip,
  Divider,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  TextField,
  Typography,
} from "@mui/material";
import React, { useState } from "react";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { PropTypes } from "prop-types";

import {
  DRAWER,
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import { inspectorUpdateUserProfile } from "../../services/inspector-update-user-profile";
import { useContext } from "react";
import { AppContext } from "../../../../contexts/AppContext";
import { provinceGetUserByKey } from "../../../province/services/province-get-user-by-key";
import { SPACING } from "../../../../data/spacing";
import { useFormik } from "formik";
import { Yup } from "../../../../lib/yup/yup";
import { NumberInput } from "../../../../components/number-format-custom/NumberFormatCustom";
import { CarPelak } from "../../../../components/car-pelak/CarPelak";

export const InspectorEditDriver = ({
  id,
  capocity,
  healthCode,
  driverName,
  mobile,
  name_of_bank_user,
  card,
  shaba,
  account,
  accountHolder,
  type,
}) => {
  const [openNotif] = useContext(AppContext);

  const dispatch = useDispatch();

  const formikDriver = useFormik({
    initialValues: {
      driver_name: driverName ? driverName : "",
      driver_mobile: mobile ? mobile : "",
      type_car: "ایسوزو",
      type_weight: "سنگین",
      capocity: capocity ? capocity : "",
      health_code: healthCode ? healthCode : "",
    },
    validationSchema: Yup.object({
      driver_name: Yup.string()
        .matches(
          /^[ض‌ص‌ث‌ق‌ف‌غ‌ع‌ه‌خ‌خ‌ح‌ج‌چ‌ش‌س‌ی‌ب‌ل‌ا‌ت‌ن‌ن‌م‌ک‌گ‌ظ‌ط‌ز‌ر‌ذ‌د‌و‌پ‌آ‌ژ ]+$/,
          "فقط حروف فارسی وارد کنید"
        )
        .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;
          }
        })
        .typeError("لطفا عدد وارد کنید!"),
      type_weight: Yup.string().typeError("لطفا فیلد را به درستی وارد کنید!"),
      capocity: Yup.string().typeError("لطفا فیلد را به درستی وارد کنید!"),
      name: Yup.string().typeError("لطفا فیلد را به درستی وارد کنید!"),
      health_code: Yup.number().typeError("لطفا فیلد را به درستی وارد کنید!"),
    }),
  });

  const formikUserBankInfo = useFormik({
    initialValues: {
      bankName: name_of_bank_user ? name_of_bank_user : "",
      cardNumber: card ? card : "",
      accountNumber: account ? account : "",
      shabaNumber: shaba ? shaba : "",
      accountHolder: accountHolder ? accountHolder : "",
    },
    validationSchema: Yup.object({
      cardNumber: Yup.number().typeError("لطفا شماره کارتتان را وارد کنید!"),
      accountNumber: Yup.number().typeError("لطفا شماره حسابتان را وارد کنید!"),
      shabaNumber: Yup.number().typeError("لطفا شماره شبا را وارد کنید!"),
      accountHolder: Yup.string().typeError("لطفا نام صاحب حساب را وارد کنید!"),
    }),
  });

  const [driverPelak, setDriverPelak] = useState([]);

  const carPelakHandleChange = (pelak1, pelak2, pelak3, pelak4) => {
    setDriverPelak([pelak1, pelak2, pelak3, pelak4]);
  };

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

  return (
    <>
      <Grid>
        <Grid container gap={SPACING.SMALL} direction="column">
          <TextField
            fullWidth
            id="driver_name"
            label="نام و نام خانوادگی راننده"
            variant="outlined"
            value={formikDriver.values.driver_name}
            error={
              formikDriver.touched.driver_name
                ? Boolean(formikDriver.errors.driver_name)
                : null
            }
            onChange={formikDriver.handleChange}
            onBlur={formikDriver.handleBlur}
            helperText={
              formikDriver.touched.driver_name &&
              Boolean(formikDriver.errors.driver_name)
                ? formikDriver.errors.driver_name
                : null
            }
          />

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

          <FormControl fullWidth>
            <InputLabel id="demo-simple-select-label">مدل خودرو</InputLabel>
            <Select
              labelId="demo-simple-select-label"
              id="type_car"
              label="مدل خودرو"
              value={formikDriver.values.type_car}
              onChange={(e) => {
                formikDriver.setFieldValue("type_car", e.target.value);
              }}
              error={
                formikDriver.touched.type_car
                  ? Boolean(formikDriver.errors.type_car)
                  : null
              }
              onBlur={formikDriver.handleBlur}
              helperText={
                formikDriver.touched.type_car &&
                Boolean(formikDriver.errors.type_car)
                  ? formikDriver.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={formikDriver.values.capocity}
            error={
              formikDriver.touched.capocity
                ? Boolean(formikDriver.errors.capocity)
                : null
            }
            onChange={formikDriver.handleChange}
            onBlur={formikDriver.handleBlur}
            helperText={
              formikDriver.touched.capocity &&
              Boolean(formikDriver.errors.capocity)
                ? formikDriver.errors.capocity
                : null
            }
          />

          <TextField
            fullWidth
            id="health_code"
            label="کد بهداشتی"
            variant="outlined"
            value={formikDriver.values.health_code}
            error={
              formikDriver.touched.health_code
                ? Boolean(formikDriver.errors.health_code)
                : null
            }
            onChange={formikDriver.handleChange}
            onBlur={formikDriver.handleBlur}
            helperText={
              formikDriver.touched.health_code &&
              Boolean(formikDriver.errors.health_code)
                ? formikDriver.errors.health_code
                : null
            }
          />
        </Grid>
        <Typography mt={SPACING.SMALL}>مشخصات پلاک</Typography>
        <Grid
          mt={SPACING.TINY}
          justifyContent="center"
          sx={{ display: "flex", flexDirection: "row" }}
        >
          <CarPelak width="100%" handleChange={carPelakHandleChange} />
        </Grid>

        <Grid
          container
          gap={SPACING.SMALL}
          mt={SPACING.SMALL}
          direction="column"
        >
          <Divider width="100%">
            <Chip label="اطلاعات بانکی" />
          </Divider>

          <FormControl fullWidth>
            <InputLabel id="demo-simple-select-label">بانک</InputLabel>
            <Select
              fullWidth
              value={formikUserBankInfo.values.bankName}
              id="bankName"
              label="بانک"
              onChange={(e) => {
                formikUserBankInfo.setFieldValue("bankName", e.target.value);
              }}
            >
              <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
            fullWidth
            id="cardNumber"
            label="شماره کارت"
            value={formikUserBankInfo.values.cardNumber}
            error={
              formikUserBankInfo.touched.cardNumber
                ? Boolean(formikUserBankInfo.errors.cardNumber)
                : null
            }
            onChange={formikUserBankInfo.handleChange}
            onBlur={formikUserBankInfo.handleBlur}
            helperText={
              formikUserBankInfo.touched.cardNumber &&
              Boolean(formikUserBankInfo.errors.cardNumber)
                ? formikUserBankInfo.errors.cardNumber
                : null
            }
            autoComplete="current-password"
            variant="outlined"
          />

          <TextField
            fullWidth
            id="accountNumber"
            label="شماره حساب"
            value={formikUserBankInfo.values.accountNumber}
            error={
              formikUserBankInfo.touched.accountNumber
                ? Boolean(formikUserBankInfo.errors.accountNumber)
                : null
            }
            onChange={formikUserBankInfo.handleChange}
            onBlur={formikUserBankInfo.handleBlur}
            helperText={
              formikUserBankInfo.touched.accountNumber &&
              Boolean(formikUserBankInfo.errors.accountNumber)
                ? formikUserBankInfo.errors.accountNumber
                : null
            }
            autoComplete="current-password"
            variant="outlined"
          />

          <TextField
            fullWidth
            id="shabaNumber"
            label="شماره شبا"
            value={formikUserBankInfo.values.shabaNumber}
            error={
              formikUserBankInfo.touched.shabaNumber
                ? Boolean(formikUserBankInfo.errors.shabaNumber)
                : null
            }
            onChange={formikUserBankInfo.handleChange}
            onBlur={formikUserBankInfo.handleBlur}
            helperText={
              formikUserBankInfo.touched.shabaNumber &&
              Boolean(formikUserBankInfo.errors.shabaNumber)
                ? formikUserBankInfo.errors.shabaNumber
                : null
            }
            autoComplete="current-password"
            variant="outlined"
          />

          <TextField
            fullWidth
            id="accountHolder"
            label="نام صاحب حساب"
            value={formikUserBankInfo.values.accountHolder}
            error={
              formikUserBankInfo.touched.accountHolder
                ? Boolean(formikUserBankInfo.errors.accountHolder)
                : null
            }
            onChange={formikUserBankInfo.handleChange}
            onBlur={formikUserBankInfo.handleBlur}
            helperText={
              formikUserBankInfo.touched.accountHolder &&
              Boolean(formikUserBankInfo.errors.accountHolder)
                ? formikUserBankInfo.errors.accountHolder
                : null
            }
            variant="outlined"
          />

          <Button
            disabled={!formikDriver.isValid}
            fullWidth
            color="primary"
            variant="contained"
            onClick={() => {
              dispatch(LOADING_START());
              dispatch(
                inspectorUpdateUserProfile({
                  type: "Driver",
                  person_type: "operator",
                  driver_key: id,
                  driver_name: formikDriver.values.driver_name,
                  driver_mobile: formikDriver.values.driver_mobile,
                  type_car: formikDriver.values.type_car,
                  capocity: formikDriver.values.capocity,
                  weight_without_load: "0",
                  health_code: formikDriver.values.health_code,
                  pelak:
                    driverPelak[0] +
                    " " +
                    driverPelak[1] +
                    " " +
                    driverPelak[2] +
                    " " +
                    driverPelak[3],

                  user_bank_info: {
                    name_of_bank_user: formikUserBankInfo.values.accountHolder,
                    bank_name: formikUserBankInfo.values.bankName,
                    card: formikUserBankInfo.values.cardNumber,
                    shaba: formikUserBankInfo.values.shabaNumber,
                    account: formikUserBankInfo.values.accountNumber,
                  },
                })
              ).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 {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "عملیات با موفقیت انجام شد.",
                    severity: "success",
                  });
                }
                dispatch(LOADING_END());
                dispatch(provinceGetUserByKey(id));
                dispatch(
                  DRAWER({ right: false, bottom: false, content: null })
                );
              });
            }}
          >
            ارسال اطلاعات
          </Button>
        </Grid>
      </Grid>
    </>
  );
};

InspectorEditDriver.propTypes = {
  id: PropTypes.any,
  capocity: PropTypes.any,
  healthCode: PropTypes.any,
  driverName: PropTypes.any,
  mobile: PropTypes.any,
  name_of_bank_user: PropTypes.any,
  bank_name: PropTypes.any,
  card: PropTypes.any,
  shaba: PropTypes.any,
  account: PropTypes.any,
  accountHolder: PropTypes.any,
  type: PropTypes.any,
};
