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

export const ProvineSubmitPrice = ({ updateTable, item }) => {
  const [openNotif] = useContext(AppContext);
  const dispatch = useDispatch();

  const initialValues = {
    kill_house_price: item?.killHousePrice || 0,
    wholesaler_price: item?.wholesalerPrice || 0,
    retailer_price: item?.retailerPrice || 0,
  };

  const validationSchema = Yup.object().shape({
    kill_house_price: Yup.number()
      .required("این فیلد الزامی است")
      .min(0, "مقدار نمی‌تواند منفی باشد"),
    wholesaler_price: Yup.number()
      .required("این فیلد الزامی است")
      .min(0, "مقدار نمی‌تواند منفی باشد"),
    retailer_price: Yup.number()
      .required("این فیلد الزامی است")
      .min(0, "مقدار نمی‌تواند منفی باشد"),
  });

  const formik = useFormik({
    initialValues,
    validationSchema,
    enableReinitialize: true,
  });

  const handleSubmit = () => {
    dispatch(
      provincePriceEditService({
        id: item?.id,
        kill_house_price: Number(formik.values.kill_house_price),
        wholesaler_price: Number(formik.values.wholesaler_price),
        retailer_price: Number(formik.values.retailer_price),
      })
    ).then((r) => {
      if (r.payload?.error) {
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: r.payload.error,
          severity: "error",
        });
      } else {
        updateTable();
        openNotif({
          vertical: "top",
          horizontal: "center",
          msg: "قیمت‌ها با موفقیت ویرایش شدند",
          severity: "success",
        });
        dispatch(
          DRAWER({
            right: false,
            bottom: false,
            content: null,
          })
        );
      }
    });
  };

  return (
    <Grid container direction="column" gap={SPACING.SMALL} sx={{ p: 1 }}>
      <TextField
        label="کارمزد کشتارگاه (ریال)"
        variant="outlined"
        fullWidth
        name="kill_house_price"
        value={formik.values.kill_house_price}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={
          formik.touched.kill_house_price &&
          Boolean(formik.errors.kill_house_price)
        }
        helperText={
          formik.touched.kill_house_price && formik.errors.kill_house_price
        }
      />

      <TextField
        label="کارمزد عمده فروش (ریال)"
        variant="outlined"
        fullWidth
        name="wholesaler_price"
        value={formik.values.wholesaler_price}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={
          formik.touched.wholesaler_price &&
          Boolean(formik.errors.wholesaler_price)
        }
        helperText={
          formik.touched.wholesaler_price && formik.errors.wholesaler_price
        }
      />

      <TextField
        label="کارمزد خرده فروش (ریال)"
        variant="outlined"
        fullWidth
        name="retailer_price"
        value={formik.values.retailer_price}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={
          formik.touched.retailer_price && Boolean(formik.errors.retailer_price)
        }
        helperText={
          formik.touched.retailer_price && formik.errors.retailer_price
        }
      />

      <Button
        variant="contained"
        color="primary"
        fullWidth
        onClick={handleSubmit}
        disabled={!formik.isValid || !formik.dirty}
      >
        ذخیره تغییرات
      </Button>
    </Grid>
  );
};
