import {
  Button,
  Checkbox,
  FormControlLabel,
  MenuItem,
  TextField,
} from "@mui/material";
import { useFormik } from "formik";
import { useContext, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { AppContext } from "../../../../contexts/AppContext";
import { SPACING } from "../../../../data/spacing";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { Yup } from "../../../../lib/yup/yup";
import { slaughterGetKillerKillhousesService } from "../../../slaughter-house/services/slaughter-get-killers-killhouses";
import { provinceCreateKillhouseService } from "../../services/province-create-killhouse";
import { provinceGetCitiesService } from "../../services/province-get-cities";
import { provinceGetSlaughterhousesQuotaService } from "../../services/province-get-slaughterhouses-quota";

const initialValues = {
  city: "",
  mobile: "",
  password: "",
  first_name: "",
  last_name: "",
  national_id: "",
  address: "",
  name: "",
  killer: false,
};

const validationSchema = Yup.object().shape({
  city: Yup.string().required("City is required"),
  mobile: Yup.string().required("Mobile is required"),
  password: Yup.string().required("Password is required"),
  first_name: Yup.string().required("First Name is required"),
  last_name: Yup.string().required("Last Name is required"),
  national_id: Yup.string().required("National ID is required"),
  address: Yup.string().required("Address is required"),
  name: Yup.string().required("Name is required"),
});

export const ProvinceCreateKillhouse = () => {
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);
  const { provinceGetCities } = useSelector((state) => state.provinceSlice);
  const formik = useFormik({
    initialValues,
    validationSchema,
    onSubmit: (values) => {
      // Handle form submission here
      // console.log(values);
      const {
        first_name,
        last_name,
        mobile,
        city,
        password,
        national_id,
        address,
        name,
        killer,
      } = values;
      dispatch(
        provinceCreateKillhouseService({
          city,
          mobile,
          password,
          first_name,
          last_name,
          national_id,
          address,
          name,
          killer,
        })
      ).then((r) => {
        if (r.payload.error) {
          openNotif({
            vertical: "top",
            horizontal: "center",
            msg: r.payload.error,
            severity: "error",
          });
        } else {
          dispatch(provinceGetSlaughterhousesQuotaService());
          dispatch(slaughterGetKillerKillhousesService());
          dispatch(DRAWER({ right: false, bottom: false, content: null }));
          openNotif({
            vertical: "top",
            horizontal: "center",
            msg: "عملیات با موفقیت انجام شد.",
            severity: "success",
          });
        }
      });
    },
  });

  useEffect(() => {
    dispatch(provinceGetCitiesService());
  }, []);

  return (
    <div>
      <form onSubmit={formik.handleSubmit}>
        <Grid container gap={SPACING.SMALL} direction="column">
          <TextField
            fullWidth
            id="first_name"
            name="first_name"
            label="نام"
            value={formik.values.first_name}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            error={
              formik.touched.first_name && Boolean(formik.errors.first_name)
            }
            helperText={formik.touched.first_name && formik.errors.first_name}
          />

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

          <TextField
            select
            label="شهر"
            variant="outlined"
            fullWidth
            id="city"
            name="city"
            value={formik.values.city}
            onChange={formik.handleChange}
            error={formik.touched.city && Boolean(formik.errors.city)}
            helperText={formik.touched.city && formik.errors.city}
          >
            {provinceGetCities?.map((city) => (
              <MenuItem key={city.id} value={city.name}>
                {city.name}
              </MenuItem>
            ))}
          </TextField>

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

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

          <TextField
            fullWidth
            id="address"
            name="address"
            label="آدرس"
            value={formik.values.address}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            error={formik.touched.address && Boolean(formik.errors.address)}
            helperText={formik.touched.address && formik.errors.address}
          />

          <TextField
            fullWidth
            id="password"
            name="password"
            label="رمزعبور"
            type="password"
            value={formik.values.password}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            error={formik.touched.password && Boolean(formik.errors.password)}
            helperText={formik.touched.password && formik.errors.password}
          />

          <FormControlLabel
            control={
              <Checkbox
                id="killer"
                name="killer"
                checked={formik.values.killer}
                onChange={formik.handleChange}
              />
            }
            label="کشتارکن می باشد"
          />

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