import { useFormik } from "formik";
import { useContext, useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { Yup } from "../../../../lib/yup/yup";
import { Grid } from "../../../../components/grid/Grid";
import {
  Button,
  FormControlLabel,
  TextField,
  Typography,
  RadioGroup,
  Radio,
  FormLabel,
  FormControl,
  CircularProgress,
} from "@mui/material";
import { FileUploader } from "../../../../components/file-uploader/FileUploader";
import { CLOSE_MODAL } from "../../../../lib/redux/slices/appSlice";
import { AppContext } from "../../../../contexts/AppContext";
import { vetFarmSavePriceService } from "../../services/vet-farm-save-price";

export const VetFarmSavePrice = ({ item, updateTable }) => {
  const [openNotif] = useContext(AppContext);
  const [filesList, setFilesList] = useState([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const dispatch = useDispatch();

  const isEditMode = !!item?.priceRegisterDate;
  const hanleFilesChange = (e) => {
    setFilesList(e);
  };

  const formik = useFormik({
    initialValues: {
      key: item.key || "",
      price: item?.price || "",
      description: item?.description || "",
      settlementType: item?.settlement_type || "cash",
    },
    validationSchema: Yup.object({
      price: Yup.number()
        .required("لطفا قیمت را وارد کنید")
        .typeError("لطفا یک عدد معتبر وارد کنید")
        .min(0, "قیمت نمی‌تواند منفی باشد"),
      description: Yup.string()
        .required("این فیلد اجباری است!")
        .min(10, "توضیحات باید حداقل ۱۰ کاراکتر باشد")
        .max(500, "توضیحات نمی‌تواند بیشتر از ۵۰۰ کاراکتر باشد"),
      settlementType: Yup.string().required("نوع تسویه الزامی است"),
    }),
    onSubmit: (values) => {
      setIsSubmitting(true);

      const formData = new FormData();
      formData.append("key", item?.key);
      formData.append("settlement_type", values.settlementType);
      formData.append("price", values.price);
      formData.append("description", values.description);

      filesList.forEach((file) => {
        formData.append(`file`, file);
      });

      dispatch(vetFarmSavePriceService(formData)).then((r) => {
        if (r.payload.error) {
          openNotif({
            vertical: "top",
            horizontal: "center",
            msg: r.payload.error,
            severity: "error",
          });
        } else {
          setIsSubmitting(false);
          updateTable();
          dispatch(CLOSE_MODAL());
          openNotif({
            vertical: "top",
            horizontal: "center",
            msg: isEditMode
              ? "ویرایش با موفقیت انجام شد."
              : "ثبت با موفقیت انجام شد.",
            severity: "success",
          });
        }
      });
    },
  });

  useEffect(() => {
    if (isEditMode) {
      formik.setValues({
        key: item?.key || "",
        price: item.price || "",
        description: item.description || "",
        settlementType: item.settlement_type || "cash",
      });
    }
    formik.validateForm();
  }, [item]);

  return (
    <form onSubmit={formik.handleSubmit}>
      <Grid container spacing={2} justifyContent="center" alignItems="center">
        <Grid item xs={12}>
          <FormControl component="fieldset" fullWidth>
            <FormLabel component="legend">نوع تسویه</FormLabel>
            <RadioGroup
              row
              aria-label="payment-type"
              name="settlementType"
              value={formik.values.settlementType}
              onChange={formik.handleChange}
            >
              <FormControlLabel value="cash" control={<Radio />} label="نقدی" />
              <FormControlLabel
                value="term"
                control={<Radio />}
                label="مدت دار"
              />
            </RadioGroup>
          </FormControl>
        </Grid>

        <Grid item xs={12}>
          <TextField
            fullWidth
            id="price"
            name="price"
            label="قیمت (ریال)"
            variant="outlined"
            type="number"
            InputProps={{
              inputProps: {
                min: 0,
                step: 1000,
              },
            }}
            value={formik.values.price}
            error={formik.touched.price && Boolean(formik.errors.price)}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={formik.touched.price && formik.errors.price}
          />
        </Grid>

        <Grid item xs={12}>
          <TextField
            multiline
            minRows={3}
            maxRows={6}
            fullWidth
            id="description"
            name="description"
            label="توضیحات"
            variant="outlined"
            value={formik.values.description}
            error={
              formik.touched.description && Boolean(formik.errors.description)
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={formik.touched.description && formik.errors.description}
          />
        </Grid>

        <Grid item xs={12}>
          <Typography color="textSecondary" gutterBottom>
            {isEditMode
              ? "فایل‌های موجود:"
              : "لطفا فایل‌های مورد نیاز را آپلود کنید"}
          </Typography>

          <Typography color="error" gutterBottom>
            {isEditMode
              ? "توجه: آپلود فایل جدید باعث جایگزینی فایل‌های قبلی می‌شود"
              : "حداکثر حجم هر فایل: 5MB"}
          </Typography>

          <FileUploader onChange={hanleFilesChange} />
        </Grid>

        <Grid item xs={12}>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            disabled={!formik.isValid || isSubmitting}
            startIcon={isSubmitting ? <CircularProgress size={20} /> : null}
          >
            {isSubmitting
              ? "در حال ارسال..."
              : isEditMode
              ? "ویرایش قیمت "
              : "ثبت گزارش قیمت"}
          </Button>
        </Grid>
      </Grid>
    </form>
  );
};
