import {
  Button,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  Typography,
} from "@mui/material";
import { useFormik } from "formik";
import { PropTypes } from "prop-types";
import { useContext } from "react";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { AppContext } from "../../../../contexts/AppContext";
import { SPACING } from "../../../../data/spacing";
import { Yup } from "../../../../lib/yup/yup";
import { avicultureGetProfile } from "../../services/aviculture-get-profile";
import { avicultureSetHallNumber } from "../../services/aviculture-set-hall-number";

export const StrictMissingHallNumber = ({
  name,
  id,
  avicultureKey,
  handleClose,
}) => {
  const [openNotif] = useContext(AppContext);
  const dispatch = useDispatch();
  const formik = useFormik({
    initialValues: {
      number_of_halls: 1,
    },
    validationSchema: Yup.object({
      number_of_halls: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا عدد وارد کنید!"),
    }),
  });

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

  return (
    <Grid container gap={SPACING.SMALL}>
      <Grid>
        <Typography variant="body2">
          تعداد سالن های {name} با شناسه جوجه ریزی {id} را وارد کنید.
        </Typography>
      </Grid>
      <Grid
        container
        justifyContent="center"
        alignItems="center"
        xs={12}
        mt={SPACING.SMALL}
      >
        <FormControl sx={{ minWidth: "100%" }}>
          <InputLabel id="demo-simple-select-label">تعداد سالن</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="type_car"
            label="تعداد سالن"
            value={formik.values.number_of_halls}
            onChange={(e) => {
              formik.setFieldValue("number_of_halls", e.target.value);
            }}
            error={
              formik.touched.number_of_halls
                ? Boolean(formik.errors.number_of_halls)
                : null
            }
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.number_of_halls &&
              Boolean(formik.errors.number_of_halls)
                ? formik.errors.number_of_halls
                : null
            }
          >
            <MenuItem value={"1"}>1</MenuItem>
            <MenuItem value={"2"}>2</MenuItem>
            <MenuItem value={"3"}>3</MenuItem>
            <MenuItem value={"4"}>4</MenuItem>
            <MenuItem value={"5"}>5</MenuItem>
            <MenuItem value={"6"}>6</MenuItem>
            <MenuItem value={"7"}>7</MenuItem>
            <MenuItem value={"8"}>8</MenuItem>
            <MenuItem value={"9"}>9</MenuItem>
            <MenuItem value={"10"}>10</MenuItem>
          </Select>
        </FormControl>
      </Grid>
      <Button
        fullWidth
        variant="contained"
        onClick={() => {
          dispatch(
            avicultureSetHallNumber({
              key: avicultureKey,
              number_of_halls: formik.values.number_of_halls,
            })
          ).then((r) => {
            if (r.error) {
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: "مشکلی پیش آمده است!",
                severity: "error",
              });
            } else {
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: "عملیات با موفقیت انجام شد.",
                severity: "success",
              });
              dispatch(avicultureGetProfile());
              handleClose();
            }
          });
        }}
      >
        ثبت
      </Button>
    </Grid>
  );
};

StrictMissingHallNumber.propTypes = {
  name: PropTypes.any,
  id: PropTypes.any,
  avicultureKey: PropTypes.any,
  handleClose: PropTypes.any,
};
