import React, { useContext } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { useDispatch } from "react-redux";
import { provinceUpdateTenantService } from "../../services/province-update-tenant";
import { AppContext } from "../../../../contexts/AppContext";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";

const validationSchema = Yup.object({
  uniqueId: Yup.string().required("شناسه یکتا الزامی است."),
  firstName: Yup.string().required("نام الزامی است."),
  lastName: Yup.string().required("نام خانوادگی الزامی است"),
  mobileNumber: Yup.string()
    .matches(/^[0-9]{11}$/, "شماره موبایل نامعتبر است")
    .required("موبایل الزامی است"),
  nationalCode: Yup.string().required("کدملی الزامی است"),
});

export const ProvinceEditTenant = ({ tenant, updateData }) => {
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);

  const formik = useFormik({
    initialValues: {
      uniqueId: tenant.breedingUniqueId,
      firstName: tenant.firstName,
      lastName: tenant.lastName,
      mobileNumber: tenant.mobile,
      nationalCode: tenant.nationalId,
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      // Handle form submission logic here
      dispatch(
        provinceUpdateTenantService({
          breeding_unique_id: values.uniqueId,
          first_name: values.firstName,
          last_name: values.lastName,
          mobile: values.mobileNumber,
          national_id: values.nationalCode,
          tenant_key: tenant.key,
        })
      ).then((r) => {
        updateData();
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: "عملیات با موفقیت انجام شد.",
          severity: "success",
        });
        dispatch(DRAWER({ right: false, bottom: false, content: null }));
      });
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <Grid container direction="column" gap={SPACING.TINY}>
        <TextField
          fullWidth
          id="uniqueId"
          name="uniqueId"
          label="شناسه یکتا"
          value={formik.values.uniqueId}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched.uniqueId && Boolean(formik.errors.uniqueId)}
          helperText={formik.touched.uniqueId && formik.errors.uniqueId}
        />

        <TextField
          fullWidth
          id="firstName"
          name="firstName"
          label="نام"
          value={formik.values.firstName}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched.firstName && Boolean(formik.errors.firstName)}
          helperText={formik.touched.firstName && formik.errors.firstName}
        />

        <TextField
          fullWidth
          id="lastName"
          name="lastName"
          label="نام خانوادگی"
          value={formik.values.lastName}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched.lastName && Boolean(formik.errors.lastName)}
          helperText={formik.touched.lastName && formik.errors.lastName}
        />

        <TextField
          fullWidth
          id="mobileNumber"
          name="mobileNumber"
          label="تلفن"
          value={formik.values.mobileNumber}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={
            formik.touched.mobileNumber && Boolean(formik.errors.mobileNumber)
          }
          helperText={formik.touched.mobileNumber && formik.errors.mobileNumber}
        />

        <TextField
          fullWidth
          id="nationalCode"
          name="nationalCode"
          label="کدملی"
          value={formik.values.nationalCode}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={
            formik.touched.nationalCode && Boolean(formik.errors.nationalCode)
          }
          helperText={formik.touched.nationalCode && formik.errors.nationalCode}
        />

        <Button color="primary" fullWidth variant="contained" type="submit">
          ثبت
        </Button>
      </Grid>
    </form>
  );
};
