import { Autocomplete, IconButton, TextField, Typography } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { useFormik } from "formik";
import { Yup } from "../../../../lib/yup/yup";
import { SPACING } from "../../../../data/spacing";
import { useDispatch, useSelector } from "react-redux";
import { LOADING_END } from "../../../../lib/redux/slices/appSlice";
import {
  stewardSellOutGetBuyers,
  stewatdSubmitBuyerDataService,
} from "../../../guild/services/steward-sell-out-get-buyers";
import { useContext, useEffect } from "react";
import { AppContext } from "../../../../contexts/AppContext";
import SearchIcon from "@mui/icons-material/Search";
import { slaughterEditBuyerDataService } from "../../../slaughter-house/services/slaughter-house-submit-buyer";

export const validationSchemaForStewardAddBuyer = 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("لطفا فیلد را به درستی وارد کنید!"),
  unit_name: Yup.string()
    .required("این فیلد اجباری است!")
    .typeError("لطفا فیلد را به درستی وارد کنید!"),
  province: Yup.string()
    .required("این فیلد اجباری است!")
    .typeError("لطفا فیلد را به درستی وارد کنید!"),
  city: Yup.string()
    .required("این فیلد اجباری است!")
    .typeError("لطفا فیلد را به درستی وارد کنید!"),
});

export const handleSubmitForStewardAddBuyer = (
  formik,
  dispatch,
  isEdit,
  tableData,
  updateTable,
  openNotif,
  DRAWER,
  role
) => {
  if (isEdit) {
    dispatch(
      slaughterEditBuyerDataService({
        buyer_key: tableData?.key,
        mobile: formik.values.mobile,
        first_name: formik.values.firstName,
        last_name: formik.values.lastName,
        unit_name: formik.values.unit_name,
        city: formik.values.city,
        province: formik.values.province,
      })
    ).then((r) => {
      updateTable();
      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(
      stewatdSubmitBuyerDataService({
        role: role,
        mobile: formik.values.mobile,
        first_name: formik.values.firstName,
        last_name: formik.values.lastName,
        unit_name: formik.values.unit_name,
        city: formik.values.city,
        province: formik.values.province,
      })
    ).then((r) => {
      updateTable();
      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",
        });
      }
    });
  }
};

export const handleSetFormDataFromTableDataForStewardAddBuyer = (
  tableData,
  formik
) => {
  formik.setValues({
    mobile: tableData.mobile || "",
    firstName: tableData.firstName || "",
    lastName: tableData.lastName || "",
    unit_name: tableData.unitName || "",
    province: tableData.province || "",
    city: tableData.city || "",
  });
  setTimeout(() => {
    formik.validateForm();
  }, 1);
};

export const handleSetFormDataFromUserDataForStewardAddBuyer = (
  userData,
  formik
) => {
  const user = userData?.[0];
  if (user) {
    console.log(user);
    formik.setValues({
      mobile: user.mobile || "",
      firstName: user.firstName || "",
      lastName: user.lastName || "",
      unit_name: user.unitName || "",
      province: user.province || "",
      city: user.city || "",
    });
    setTimeout(() => {
      formik.validateForm();
    }, 1);
  }
};

export const InquiryForStewardAddBuyer = ({
  notFound,
  setNotFound,
  setUserData,
  formik,
}) => {
  const [openNotif] = useContext(AppContext);
  const selectedSubUser = useSelector(
    (state) => state.userSlice.selectedSubUser
  );
  const dispatch = useDispatch();
  const formik2 = useFormik({
    initialValues: {
      mobile: "",
    },
    validationSchema: Yup.object({
      mobile: Yup.string()
        .required("این فیلد اجباری است!")
        .min(11, "شماره موبایل باید 11 رقم باشد")
        .max(11, "شماره موبایل باید 11 رقم باشد")
        .matches(/^09\d{9}$/, "شماره موبایل باید با 09 شروع شود و 11 رقم باشد"),
    }),
    validateOnMount: true,
  });

  const handleInquiry = () => {
    dispatch(
      stewardSellOutGetBuyers({
        mobile: formik2.values.mobile,
        role_key: selectedSubUser?.key || "",
      })
    ).then((r) => {
      dispatch(LOADING_END());
      if (r.error) {
        setNotFound(true);
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: "خریدار یافت نشد، یک خریدار جدید ثبت کنید!",
          severity: "error",
        });
      } else {
        const responseData = r.payload?.data;
        // Check if response is an empty array
        if (Array.isArray(responseData) && responseData.length === 0) {
          setNotFound(true);
          setUserData(null);
        } else {
          setNotFound(false);
          handleSetFormDataFromUserDataForStewardAddBuyer(responseData, formik);
          setUserData(responseData);
        }
      }
    });
  };

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

  return (
    <Grid container xs={12}>
      <Typography>جستجو کاربر</Typography>
      <Grid mt={SPACING.SMALL} display="flex" width={1}>
        <TextField
          fullWidth
          id="mobile"
          label="شماره موبایل"
          variant="outlined"
          value={formik2.values.mobile}
          error={formik2.touched.mobile && Boolean(formik2.errors.mobile)}
          onChange={(e) => {
            formik2.handleChange(e);
            // Reset notFound when user starts typing
            if (notFound) {
              setNotFound(false);
            }
          }}
          onBlur={formik2.handleBlur}
          helperText={formik2.touched.mobile && formik2.errors.mobile}
        />
        <IconButton
          disabled={!formik2.isValid}
          aria-label="search"
          color="primary"
          onClick={handleInquiry}
        >
          <SearchIcon />
        </IconButton>
      </Grid>
      {notFound && (
        <Grid container xs={12} mt={SPACING.SMALL}>
          <Typography variant="body2" color="error" sx={{ width: "100%" }}>
            خریداری یافت نشد
          </Typography>
        </Grid>
      )}
    </Grid>
  );
};

export const StewardAddBuyerForm = ({
  formik,
  provinceData,
  cityData,
  notFound,
}) => {
  return (
    <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="unit_name"
        label="نام واحد"
        variant="outlined"
        value={formik.values.unit_name}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        helperText={formik.touched.unit_name && formik.errors.unit_name}
      />
      {provinceData.length > 0 && (
        <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="استان را انتخاب کنید" />
          )}
          value={
            provinceData.find((i) => i.name === formik.values.province)?.name
          }
        />
      )}
      {!notFound && (
        <Typography variant="caption" color="error">
          استان: {formik.values.province}
        </Typography>
      )}
      {cityData.length > 0 && (
        <Autocomplete
          key={formik.values.city}
          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="شهر را انتخاب کنید" />
          )}
          value={cityData.find((i) => i.name === formik.values.city)?.name}
        />
      )}

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