import { Button, TextField, Typography } from "@mui/material";
import { useFormik } from "formik";
import React, { useContext, useEffect } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { Yup } from "../../../../lib/yup/yup";
import { PropTypes } from "prop-types";
import { useDispatch } from "react-redux";
import { AppContext } from "../../../../contexts/AppContext";
import {
  DRAWER,
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import { slaughterGetRegisteredComplaints } from "../../services/slaughter-get-registered-complaints";
import useUserProfile from "../../../authentication/hooks/useUserProfile";
import { slaughterSupplyInventory } from "../../services/slaughter-supply-inventory";

export const SlaughterSupplyInventoryForm = () => {
  const [openNotif] = useContext(AppContext);
  const dispatch = useDispatch();

  const [, userProfile] = useUserProfile();

  const formik = useFormik({
    initialValues: {
      description: "",
    },
    validationSchema: Yup.object({
      description: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا فیلد را پر کنید!"),
    }),
  });

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

  return (
    <Grid
      container
      gap={SPACING.SMALL}
      direction="column"
      flex="1"
      height="100%"
      justifyContent="space-between"
    >
      <Grid container direction="column" gap={SPACING.SMALL}>
        <TextField
          id="amount"
          label="حجم قابل فروش"
          variant="outlined"
          sx={{ width: "100%", height: "100%" }}
          value={formik.values.amount}
          error={formik.touched.amount ? Boolean(formik.errors.amount) : null}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.amount && Boolean(formik.errors.amount)
              ? formik.errors.amount
              : null
          }
        />
        <Typography>موجودی سیستم 450.000</Typography>
        <TextField
          id="amount"
          label="دلیل اختلاف موجودی ثبت شده با موجودی خود"
          multiline
          rows={5}
          variant="outlined"
          sx={{ width: "100%", height: "100%" }}
          value={formik.values.amount}
          error={formik.touched.amount ? Boolean(formik.errors.amount) : null}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.amount && Boolean(formik.errors.amount)
              ? formik.errors.amount
              : null
          }
        />
        <TextField
          id="amount"
          label="حجم کل مرغ منجمد را وارد کنید"
          variant="outlined"
          sx={{ width: "100%", height: "100%" }}
          value={formik.values.amount}
          error={formik.touched.amount ? Boolean(formik.errors.amount) : null}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.amount && Boolean(formik.errors.amount)
              ? formik.errors.amount
              : null
          }
        />
        <TextField
          id="amount"
          label="حجم کل جگر مرغ  را وارد کنید"
          variant="outlined"
          sx={{ width: "100%", height: "100%" }}
          value={formik.values.amount}
          error={formik.touched.amount ? Boolean(formik.errors.amount) : null}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.amount && Boolean(formik.errors.amount)
              ? formik.errors.amount
              : null
          }
        />
        <TextField
          id="amount"
          label="حجم کل قلب مرغ  را وارد کنید"
          variant="outlined"
          sx={{ width: "100%", height: "100%" }}
          value={formik.values.amount}
          error={formik.touched.amount ? Boolean(formik.errors.amount) : null}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.amount && Boolean(formik.errors.amount)
              ? formik.errors.amount
              : null
          }
        />
        <TextField
          id="amount"
          label="حجم کل پای مرغ  را وارد کنید"
          variant="outlined"
          sx={{ width: "100%", height: "100%" }}
          value={formik.values.amount}
          error={formik.touched.amount ? Boolean(formik.errors.amount) : null}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          helperText={
            formik.touched.amount && Boolean(formik.errors.amount)
              ? formik.errors.amount
              : null
          }
        />
      </Grid>
      <Button
        fullWidth
        variant="contained"
        // disabled={!formik.isValid}
        onClick={() => {
          // create basic user data
          const basicUserData = {
            firstName: userProfile.firstName,
            lastName: userProfile.lastName,
            mobile: userProfile.mobile,
            nationalCode: userProfile.nationalId,
            province: userProfile.province,
            city: userProfile.city,
            username: userProfile.nationalId,
            password: userProfile.nationalId,
          };
          dispatch(LOADING_START());
          dispatch(slaughterSupplyInventory(basicUserData)).then((r) => {
            dispatch(LOADING_END());
            if (r.error) {
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: "مشکلی پیش آمده است",
                severity: "error",
              });
            } else {
              dispatch(DRAWER({ right: false, bottom: false, content: null }));
              dispatch(slaughterGetRegisteredComplaints());
              openNotif({
                vertical: "top",
                horizontal: "center",
                msg: "عملیات با موفقیت انجام شد!",
                severity: "success",
              });
            }
          });
        }}
      >
        ثبت اطلاعات
      </Button>
    </Grid>
  );
};

SlaughterSupplyInventoryForm.propTypes = {
  barKey: PropTypes.any,
};
