import { Autocomplete, Button, TextField } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import React, { useEffect } from "react";
import { Yup } from "../../../../lib/yup/yup";
import { useFormik } from "formik";
import { useState } from "react";
import { useDispatch } from "react-redux";
import {
  DRAWER,
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import { cityGetProvinces } from "../../services/CityGetProvinces";
import { cityGetCity } from "../../services/city-get-city";
import { citySubmitNewTenant } from "../../services/city-submit-new-tenant";
import { useContext } from "react";
import { AppContext } from "../../../../contexts/AppContext";
import { PropTypes } from "prop-types";
import { provinceGetUserByKey } from "../../../province/services/province-get-user-by-key";

export const CitySubmitTenantForm = ({ id, userid }) => {
  const [openNotif] = useContext(AppContext);
  const dispatch = useDispatch();
  const [provinceData, setProvinceData] = useState();
  const [cityData, setCityData] = useState();
  const [provinceKey, setProvinceKey] = useState();
  const [cityKey, setCityKey] = useState();

  const [isExistProvince, setIsExistProvince] = useState(true);

  const formik = useFormik({
    initialValues: {
      mobile: "",
      fname: "",
      lname: "",
      nationalcode: "",
      address: "",
      postal: "",
      password: "",
      uniqueID: "",
    },
    validationSchema: Yup.object({
      mobile: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به صورت عددی وارد کنید!")
        .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;
          }
        }),
      fname: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
      lname: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
      nationalcode: Yup.number()
        .required("این فیلد اجباری است!")
        .test("len", "کد ملی میبایست ده رقم باشد.", (val, context) => {
          if (context.originalValue) {
            return context.originalValue.length === 10;
          }
        }),

      address: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
      postal: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به صورت عددی وارد کنید!"),
      uniqueID: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به صورت عددی وارد کنید!"),
      password: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا مقادیر را به درستی وارد کنید!")
        .test(
          "len",
          "لطفا حداقل 5 حرف و حداکثر 12 حرف وارد کنید",
          (val) => val.toString().length >= 5 && val.toString().length <= 12
        ),
    }),
  });

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

  useEffect(() => {
    dispatch(LOADING_START());
    dispatch(cityGetProvinces())?.then((r) => {
      dispatch(LOADING_END());
      setProvinceData(r.payload.data);
    });
  }, []);

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

  useEffect(() => {
    if (provinceKey) {
      dispatch(LOADING_START());
      dispatch(cityGetCity(provinceKey)).then((r) => {
        setCityData(r.payload.data);
        setIsExistProvince(false);
        dispatch(LOADING_END());
      });
    }
  }, [provinceKey]);

  return (
    <Grid
      container
      display="block"
      gap={SPACING.SMALL}
      direction="column"
      flex="1"
      height="100%"
      justifyContent="space-between"
    >
      <Grid container direction="column" gap={SPACING.SMALL}>
        <Grid>
          <Autocomplete
            disablePortal
            id="province"
            options={
              provinceData
                ? provinceData?.map((i) => ({ id: i.key, label: i.name }))
                : []
            }
            onChange={(event, value) => {
              setProvinceKey(value.id);
            }}
            renderInput={(params) => (
              <TextField {...params} label="استان را انتخاب  کنید" />
            )}
          />
        </Grid>
        <Grid>
          <Autocomplete
            disabled={isExistProvince}
            disablePortal
            id="city"
            options={
              cityData
                ? cityData.map((i) => ({ id: i.key, label: i.name }))
                : []
            }
            onChange={(event, value) => {
              setCityKey(value.id);
            }}
            renderInput={(params) => (
              <TextField {...params} label="شهر را انتخاب  کنید" />
            )}
          />
        </Grid>
        <Grid>
          <TextField
            id="uniqueID"
            label="شناسه یکتا مرغدار"
            variant="outlined"
            sx={{ width: "100%" }}
            value={formik.values.uniqueID}
            error={
              formik.touched.uniqueID ? Boolean(formik.errors.uniqueID) : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.uniqueID && Boolean(formik.errors.uniqueID)
                ? formik.errors.uniqueID
                : null
            }
          />
        </Grid>
        <Grid>
          <TextField
            id="fname"
            label="نام"
            variant="outlined"
            sx={{ width: "100%" }}
            value={formik.values.fname}
            error={formik.touched.fname ? Boolean(formik.errors.fname) : null}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.fname && Boolean(formik.errors.fname)
                ? formik.errors.fname
                : null
            }
          />
        </Grid>
        <Grid>
          <TextField
            id="lname"
            label="نام خانوادگی "
            variant="outlined"
            sx={{ width: "100%" }}
            value={formik.values.lname}
            error={formik.touched.lname ? Boolean(formik.errors.lname) : null}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.lname && Boolean(formik.errors.lname)
                ? formik.errors.lname
                : null
            }
          />
        </Grid>
        <Grid>
          <TextField
            id="password"
            label="رمز عبور"
            type="password"
            variant="outlined"
            sx={{ width: "100%" }}
            value={formik.values.password}
            error={
              formik.touched.password ? Boolean(formik.errors.password) : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.password && Boolean(formik.errors.password)
                ? formik.errors.password
                : null
            }
          />
        </Grid>
        <Grid>
          <TextField
            id="mobile"
            label="موبایل"
            variant="outlined"
            sx={{ width: "100%" }}
            value={formik.values.mobile}
            error={formik.touched.mobile ? Boolean(formik.errors.mobile) : null}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.mobile && Boolean(formik.errors.mobile)
                ? formik.errors.mobile
                : null
            }
          />
        </Grid>
        <Grid>
          <TextField
            id="nationalcode"
            label="کد ملی"
            variant="outlined"
            sx={{ width: "100%" }}
            value={formik.values.nationalcode}
            error={
              formik.touched.nationalcode
                ? Boolean(formik.errors.nationalcode)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.nationalcode && Boolean(formik.errors.nationalcode)
                ? formik.errors.nationalcode
                : null
            }
          />
        </Grid>
        <Grid>
          <TextField
            id="address"
            label="آدرس"
            variant="outlined"
            sx={{ width: "100%" }}
            value={formik.values.address}
            error={
              formik.touched.address ? Boolean(formik.errors.address) : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.address && Boolean(formik.errors.address)
                ? formik.errors.address
                : null
            }
          />
        </Grid>
        <Grid>
          <TextField
            id="postal"
            label="کد پستی"
            variant="outlined"
            sx={{ width: "100%" }}
            value={formik.values.postal}
            error={formik.touched.postal ? Boolean(formik.errors.postal) : null}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.postal && Boolean(formik.errors.postal)
                ? formik.errors.postal
                : null
            }
          />
        </Grid>
        <Grid mb={SPACING.SMALL}>
          <Button
            fullWidth
            variant="contained"
            disabled={!formik.isValid}
            onClick={() => {
              dispatch(
                citySubmitNewTenant({
                  username: formik.values.mobile,
                  password: formik.values.password,
                  api_key: "11d89a11-bd11-2111-a02f-2cc1cbf4e1d4",
                  role: "Poultry",
                  tenant: {
                    poultry_key: id,
                    unique_id: formik.values.uniqueID,
                    province: provinceKey,
                    city: cityKey,
                    first_name: formik.values.fname,
                    last_name: formik.values.lname,
                    national_code: formik.values.nationalcode,
                    address: formik.values.address,
                    postal_code: formik.values.postal,
                  },
                })
              ).then((r) => {
                dispatch(LOADING_END());
                dispatch(provinceGetUserByKey(userid));
                if (r.error) {
                  dispatch(LOADING_END());
                  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(
                    DRAWER({ right: false, bottom: false, content: null })
                  );
                }
              });
            }}
          >
            ثبت اطلاعات
          </Button>
        </Grid>
      </Grid>
    </Grid>
  );
};

CitySubmitTenantForm.propTypes = {
  id: PropTypes.any,
  userid: PropTypes.any,
};
