import React, { useContext, useEffect, useState } from "react";
import { Grid } from "../../../../components/grid/Grid";
import {
  Button,
  FormControl,
  FormControlLabel,
  FormLabel,
  Radio,
  RadioGroup,
  TextField,
} from "@mui/material";
import { Yup } from "../../../../lib/yup/yup";
import { useFormik } from "formik";
import { SPACING } from "../../../../data/spacing";
import { provinceFreeSalesSubmitBuyer } from "../../services/province-free-sales-submit-buyer";
import { AppContext } from "../../../../contexts/AppContext";
import { useDispatch } from "react-redux";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { provinceFreeSalesEditBuyer } from "../../services/province-free-sales-edit-buyer";

export const ProvinceFreeSaleAddBuyer = ({ fetchApiData, isEdit, item }) => {
  const [openNotif] = useContext(AppContext);
  const dispatch = useDispatch();
  const formik = useFormik({
    initialValues: {
      fullname: item?.fullname ? item?.fullname : "",
      mobile: item?.mobile ? item?.mobile : "",
      province: item?.province ? item?.province : "",
      city: item?.city ? item?.city : "",
      unitname: item?.unitName ? item?.unitName : "",
      uniqueCode: item?.killHouseUniqueId ? item?.killHouseUniqueId : "",
    },
    validationSchema: Yup.object({
      fullname: Yup.string()
        .required("این فیلد اجباری است!")
        .matches(
          /^[^*&^%$#@!()|.]*$/,
          "این فیلد نباید شامل کاراکترهای ویژه باشد!"
        ),
      mobile: Yup.string()
        .required("شماره موبایل الزامی است")
        .min(11, "شماره موبایل باید 11 رقم باشد")
        .max(11, "شماره موبایل باید 11 رقم باشد")
        .matches(/^09\d{9}$/, "شماره موبایل باید با 09 شروع شود و 11 رقم باشد"),
      province: Yup.string()
        .required("این فیلد اجباری است!")
        .matches(
          /^[^*&^%$#@!()|.]*$/,
          "این فیلد نباید شامل کاراکترهای ویژه باشد!"
        ),
      city: Yup.string()
        .required("این فیلد اجباری است!")
        .matches(
          /^[^*&^%$#@!()|.]*$/,
          "این فیلد نباید شامل کاراکترهای ویژه باشد!"
        ),
      unitname: Yup.string().matches(
        /^[^*&^%$#@!()|.]*$/,
        "این فیلد نباید شامل کاراکترهای ویژه باشد!"
      ),
      uniqueCode: Yup.string().matches(
        /^[^*&^%$#@!()|.]*$/,
        "این فیلد نباید شامل کاراکترهای ویژه باشد!"
      ),
    }),
  });

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

  const [type, setType] = useState(item?.type ? item?.type : "killhouse");

  const handleChange = (event) => {
    setType(event.target.value);
  };

  const isFormValid = () => {
    if (type === "killhouse") {
      return formik.isValid && formik.values.unitname;
    } else {
      return formik.isValid;
    }
  };

  return (
    <Grid
      container
      direction="column"
      flex="1"
      justifyContent="space-between"
      gap={SPACING.SMALL}
    >
      <Grid container direction="column" gap={SPACING.TINY}>
        <TextField
          id="fullname"
          label="نام و نام خانوادگی خریدار"
          variant="outlined"
          sx={{ width: "100%", height: "100%" }}
          value={formik.values.fullname}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={
            formik.touched.fullname ? Boolean(formik.errors.fullname) : null
          }
          helperText={
            formik.touched.fullname && Boolean(formik.errors.fullname)
              ? formik.errors.fullname
              : null
          }
        />
        <TextField
          id="mobile"
          label="موبایل"
          variant="outlined"
          sx={{ width: "100%", height: "100%" }}
          value={formik.values.mobile}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched.mobile ? Boolean(formik.errors.mobile) : null}
          helperText={
            formik.touched.mobile && Boolean(formik.errors.mobile)
              ? formik.errors.mobile
              : null
          }
        />
        <TextField
          id="province"
          label="استان"
          variant="outlined"
          sx={{ width: "100%", height: "100%" }}
          value={formik.values.province}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={
            formik.touched.province ? Boolean(formik.errors.province) : null
          }
          helperText={
            formik.touched.province && Boolean(formik.errors.province)
              ? formik.errors.province
              : null
          }
        />
        <TextField
          id="city"
          label="شهر"
          variant="outlined"
          sx={{ width: "100%", height: "100%" }}
          value={formik.values.city}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched.city ? Boolean(formik.errors.city) : null}
          helperText={
            formik.touched.city && Boolean(formik.errors.city)
              ? formik.errors.city
              : null
          }
        />
        <FormControl>
          <FormLabel id="demo-controlled-radio-buttons-group">
            نوع خریدار
          </FormLabel>
          <RadioGroup
            row
            aria-labelledby="demo-controlled-radio-buttons-group"
            name="controlled-radio-buttons-group"
            value={type}
            onChange={handleChange}
          >
            <FormControlLabel
              value="killhouse"
              control={<Radio />}
              label="کشتارگاه"
            />
            <FormControlLabel
              value="killer"
              control={<Radio />}
              label="کشتارکن"
            />
          </RadioGroup>
        </FormControl>

        {type === "killhouse" && (
          <Grid container direction="column" gap={SPACING.TINY}>
            <TextField
              id="unitname"
              label="نام کشتارگاه"
              variant="outlined"
              sx={{ width: "100%", height: "100%" }}
              value={formik.values.unitname}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              error={
                formik.touched.unitname ? Boolean(formik.errors.unitname) : null
              }
              helperText={
                formik.touched.unitname && Boolean(formik.errors.unitname)
                  ? formik.errors.unitname
                  : null
              }
            />

            <TextField
              id="uniqueCode"
              label="شناسه یکتا"
              variant="outlined"
              sx={{ width: "100%", height: "100%" }}
              value={formik.values.uniqueCode}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              error={
                formik.touched.uniqueCode
                  ? Boolean(formik.errors.uniqueCode)
                  : null
              }
              helperText={
                formik.touched.uniqueCode && Boolean(formik.errors.uniqueCode)
                  ? formik.errors.uniqueCode
                  : null
              }
            />
          </Grid>
        )}

        <Button
          variant="contained"
          disabled={!isFormValid()}
          onClick={() => {
            if (isEdit) {
              dispatch(
                provinceFreeSalesEditBuyer({
                  buyer_key: item?.key,
                  type: type,
                  fullname: formik.values.fullname,
                  mobile: formik.values.mobile,
                  unit_name:
                    type === "killhouse" ? formik.values.unitname : null,
                  city: formik.values.city,
                  province: formik.values.province,
                  kill_house_unique_id:
                    type === "killhouse" ? formik.values.uniqueCode : null,
                })
              ).then((r) => {
                if (r.payload.error) {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: r.payload.error,
                    severity: "error",
                  });
                } else {
                  fetchApiData(1);
                  dispatch(
                    DRAWER({ right: false, bottom: false, content: null })
                  );
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "عملیات با موفقیت انجام شد.",
                    severity: "success",
                  });
                }
              });
            } else {
              dispatch(
                provinceFreeSalesSubmitBuyer({
                  type: type,
                  fullname: formik.values.fullname,
                  mobile: formik.values.mobile,
                  unit_name:
                    type === "killhouse" ? formik.values.unitname : null,
                  city: formik.values.city,
                  province: formik.values.province,
                  kill_house_unique_id:
                    type === "killhouse" ? formik.values.uniqueCode : null,
                })
              ).then((r) => {
                if (r.payload.error) {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: r.payload.error,
                    severity: "error",
                  });
                } else {
                  fetchApiData(1);
                  dispatch(
                    DRAWER({ right: false, bottom: false, content: null })
                  );
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "عملیات با موفقیت انجام شد.",
                    severity: "success",
                  });
                }
              });
            }
          }}
        >
          ثبت
        </Button>
      </Grid>
    </Grid>
  );
};
