import { useContext, useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { useFormik } from "formik";
import {
  Autocomplete,
  Button,
  IconButton,
  TextField,
  Typography,
} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import { AppContext } from "../../../../contexts/AppContext";
import { Yup } from "../../../../lib/yup/yup";
import {
  slaughterGetCitiesService,
  slaughterGetProvinceService,
} from "../../../slaughter-house/services/slaughter-get-provinces";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import {
  slaughterEditBuyerDataService,
  slaughterGetBuyerDataService,
  slaughterSubmitBuyerDataService,
} from "../../../slaughter-house/services/slaughter-house-submit-buyer";
import { DRAWER, LOADING_END } from "../../../../lib/redux/slices/appSlice";
import { fetchStewardBroadcastAndProducts } from "../../services/handle-fetch-steward-products";

export const StewardSellOutOfProvinceBuyersEditBuyer = ({
  updateTable,
  isEdit,
  data,
}) => {
  const [openNotif] = useContext(AppContext);
  const [userData, setUserData] = useState(null);
  const [notFound, setNotFound] = useState(false);
  const dispatch = useDispatch();
  const [provinceData, setProvinceData] = useState([]);
  const [cityData, setCityData] = useState([]);

  const formik = useFormik({
    initialValues: {
      mobile: "",
      firstName: "",
      lastName: "",
      unitName: "",
      province: "",
      city: "",
    },
    validationSchema: Yup.object({
      mobile: Yup.string()
        .required("این فیلد اجباری است!")
        .min(11, "شماره موبایل باید 11 رقم باشد")
        .max(11, "شماره موبایل باید 11 رقم باشد")
        .matches(/^09\d{9}$/, "شماره موبایل باید با 09 شروع شود و 11 رقم باشد"),
      firstName: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
      lastName: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
      unitName: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
      province: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
      city: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را به درستی وارد کنید!"),
    }),
  });

  const formik2 = useFormik({
    initialValues: {
      userInfoCheck: "",
    },
    validationSchema: Yup.object({
      userInfoCheck: Yup.string()
        .required("این فیلد اجباری است!")
        .min(11, "شماره موبایل باید 11 رقم باشد")
        .max(11, "شماره موبایل باید 11 رقم باشد")
        .matches(/^09\d{9}$/, "شماره موبایل باید با 09 شروع شود و 11 رقم باشد"),
    }),
    validateOnMount: true,
  });

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

  useEffect(() => {
    if (userData) {
      formik.setValues({
        mobile: userData.mobile || "",
        firstName: userData.firstName || "",
        lastName: userData.lastName || "",
        unitName: userData.unitName || "",
        province: userData.province || "",
        city: userData.city || "",
      });
      setTimeout(() => {
        formik.validateForm();
      }, 1);
    }
  }, [userData]);

  useEffect(() => {
    if (isEdit) {
      formik.setValues({
        mobile: data.mobile || "",
        firstName: data.firstName || "",
        lastName: data.lastName || "",
        unitName: data.unitName || "",
        province: data.province || "",
        city: data.city || "",
      });
      setTimeout(() => {
        formik.validateForm();
      }, 1);
    }
  }, [isEdit]);

  useEffect(() => {
    if (notFound) {
      formik.setFieldValue("mobile", formik2.values.userInfoCheck);
    }
  }, [notFound]);

  useEffect(() => {
    dispatch(slaughterGetProvinceService()).then((r) => {
      setProvinceData(r.payload.data);
    });
  }, []);

  useEffect(() => {
    if (formik.values.province) {
      setCityData(
        [],
        dispatch(slaughterGetCitiesService(formik.values.province)).then(
          (r) => {
            setCityData(r.payload.data);
          }
        )
      );
    }
  }, [formik.values.province]);

  return (
    <Grid
      container
      justifyContent="space-between"
      alignItems="center"
      xs={12}
      direction="column"
      gap={2}
    >
      {!userData && !notFound && !isEdit ? (
        <Grid container xs={12}>
          <Typography>جستجو کاربر</Typography>
          <Grid mt={SPACING.SMALL} display="flex" width={1}>
            <TextField
              fullWidth
              id="userInfoCheck"
              label="شماره موبایل"
              variant="outlined"
              value={formik2.values.userInfoCheck}
              error={
                formik2.touched.userInfoCheck &&
                Boolean(formik2.errors.userInfoCheck)
              }
              onChange={formik2.handleChange}
              onBlur={formik2.handleBlur}
              helperText={
                formik2.touched.userInfoCheck && formik2.errors.userInfoCheck
              }
            />
            <IconButton
              disabled={!formik2.isValid}
              aria-label="search"
              color="primary"
              onClick={() => {
                dispatch(
                  slaughterGetBuyerDataService(formik2.values.userInfoCheck)
                ).then((r) => {
                  dispatch(LOADING_END());
                  if (r.error) {
                    setNotFound(true);
                    openNotif({
                      vertical: "top",
                      horizontal: "center",
                      msg: "خریدار یافت نشد، یک خریدار جدید ثبت کنید!",
                      severity: "error",
                    });
                  } else {
                    setUserData(r.payload.data);
                  }
                });
              }}
            >
              <SearchIcon />
            </IconButton>
          </Grid>
        </Grid>
      ) : (
        <Grid
          container
          justifyContent="space-between"
          alignItems="start"
          xs={12}
          direction="column"
          gap={2}
        >
          <TextField
            fullWidth
            id="mobile"
            label="شماره موبایل"
            variant="outlined"
            value={formik.values.mobile}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={formik.touched.mobile && formik.errors.mobile}
          />
          <TextField
            fullWidth
            id="firstName"
            label="نام"
            variant="outlined"
            value={formik.values.firstName}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={formik.touched.firstName && formik.errors.firstName}
          />
          <TextField
            fullWidth
            id="lastName"
            label="نام خانوادگی"
            variant="outlined"
            value={formik.values.lastName}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={formik.touched.lastName && formik.errors.lastName}
          />
          <TextField
            fullWidth
            id="unitName"
            label="نام واحد"
            variant="outlined"
            value={formik.values.unitName}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={formik.touched.unitName && formik.errors.unitName}
          />

          <Autocomplete
            style={{ width: "100%" }}
            disablePortal
            id="province"
            options={
              provinceData
                ? provinceData.map((i) => ({ id: i.name, label: i.name }))
                : []
            }
            onChange={(e, value) => {
              formik.setFieldValue("province", value ? value.id : "");
              formik.setFieldValue("city", "");
            }}
            renderInput={(params) => (
              <TextField {...params} label="استان را انتخاب کنید" />
            )}
          />
          {!notFound && (
            <Typography variant="caption" color="error">
              استان: {formik.values.province}
            </Typography>
          )}

          <Autocomplete
            minWidth={210}
            style={{ width: "100%" }}
            disabled={!formik.values.province}
            disablePortal
            id="city"
            options={
              cityData
                ? cityData.map((i) => ({ id: i.name, label: i.name }))
                : []
            }
            onChange={(e, value) => {
              formik.setFieldValue("city", value ? value.id : "");
            }}
            renderInput={(params) => (
              <TextField {...params} label="شهر را انتخاب کنید" />
            )}
          />

          {!notFound && (
            <Typography variant="caption" color="error">
              شهر: {formik.values.city}
            </Typography>
          )}
        </Grid>
      )}

      {(userData || notFound || isEdit) && (
        <Grid container xs={12}>
          <Button
            fullWidth
            variant="contained"
            disabled={!formik.isValid}
            onClick={() => {
              if (isEdit) {
                dispatch(
                  slaughterEditBuyerDataService({
                    buyer_key: data?.key,
                    mobile: formik.values.mobile,
                    first_name: formik.values.firstName,
                    last_name: formik.values.lastName,
                    unit_name: formik.values.unitName,
                    city: formik.values.city,
                    province: formik.values.province,
                  })
                ).then((r) => {
                  updateTable();
                  dispatch(fetchStewardBroadcastAndProducts());
                  if (r.payload.error) {
                    openNotif({
                      vertical: "top",
                      horizontal: "center",
                      msg: r.payload.error,
                      severity: "error",
                    });
                  } else {
                    dispatch(
                      DRAWER({ right: false, bottom: false, content: null })
                    );

                    openNotif({
                      vertical: "top",
                      horizontal: "center",
                      msg: "عملیات با موفقیت انجام شد.",
                      severity: "success",
                    });
                  }
                });
              } else {
                dispatch(
                  slaughterSubmitBuyerDataService({
                    mobile: formik.values.mobile,
                    first_name: formik.values.firstName,
                    last_name: formik.values.lastName,
                    unit_name: formik.values.unitName,
                    city: formik.values.city,
                    province: formik.values.province,
                  })
                ).then((r) => {
                  updateTable();
                  dispatch(fetchStewardBroadcastAndProducts());
                  if (r.payload.error) {
                    openNotif({
                      vertical: "top",
                      horizontal: "center",
                      msg: r.payload.error,
                      severity: "error",
                    });
                  } else {
                    dispatch(
                      DRAWER({ right: false, bottom: false, content: null })
                    );

                    openNotif({
                      vertical: "top",
                      horizontal: "center",
                      msg: "عملیات با موفقیت انجام شد.",
                      severity: "success",
                    });
                  }
                });
              }
            }}
          >
            {isEdit ? "ویرایش" : "ثبت"}
          </Button>
        </Grid>
      )}
    </Grid>
  );
};
