import { Autocomplete, Button, TextField } from "@mui/material";
import { useFormik } from "formik";
import React, { useEffect } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { Yup } from "../../../../lib/yup/yup";

export const ProvinceFinancialRegisterDebt = () => {
  const formik = useFormik({
    initialValues: {
      price: "",
      description: "",
    },
    validationSchema: Yup.object({
      description: Yup.string()
        .required("لطفا پیغام خود را بنویسید!")
        .typeError("لطفا فیلد را پر کنید!"),
      price: Yup.number()
        .required("لطفا عدد وارد کنید!")
        .typeError("لطفا فیلد را پر کنید!"),
    }),
  });

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

  return (
    <Grid>
      <Grid container gap={SPACING.SMALL} direction="column">
        <Grid>
          <Autocomplete
            disablePortal
            id="province"
            // options={
            //   provinceData
            //     ? provinceData.map((i) => ({
            //         id: i.key,
            //         label: i.name,
            //       }))
            //     : []
            // }
            // onChange={(e, value) => {
            //   setPoultryProvinceKey(value.id);
            // }}
            renderInput={(params) => (
              <TextField {...params} label="انتخاب مرغدار " />
            )}
          />
        </Grid>
        <Grid>
          <TextField
            fullWidth
            id="price"
            label="مبلغ"
            variant="outlined"
            value={formik.values.price}
            error={formik.touched.price ? Boolean(formik.errors.price) : null}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.price && Boolean(formik.errors.price)
                ? formik.errors.price
                : null
            }
          />
        </Grid>
        <Grid>
          <TextField
            fullWidth
            multiline
            rows={5}
            id="description"
            label="توضیحات"
            variant="outlined"
            value={formik.values.description}
            error={
              formik.touched.description
                ? Boolean(formik.errors.description)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.description && Boolean(formik.errors.description)
                ? formik.errors.description
                : null
            }
          />
        </Grid>

        {/* <Grid mb={SPACING.SMALL}>
          <ImageUpload
            id="image"
            // onChange={complaintImageHandler}
            // images={complaintImages}
            maxNumber={4}
            title={"بارگذاری سند"}
            // value={formik.values.image}
            // error={formik.touched.image ? Boolean(formik.errors.image) : null}
            // onBlur={formik.handleBlur}
            // helperText={
            //   formik.touched.image && Boolean(formik.errors.image)
            //     ? formik.errors.image
            //     : null
            // }
          />
        </Grid> */}

        <Grid>
          <Button
            fullWidth
            variant="contained"
            // disabled={!isFormValid(topic)}
            // onClick={() => {
            //   dispatch(LOADING_START());
            //   dispatch(
            //     slaughterNewComplaint({
            //       bar_key: barKey,
            //       image: complaintImagesBase64,
            //       title: topic === 10 ? " مغایرت درصد تلفات با واقعیت" : "دیگر",
            //       description: formik.values.description,
            //       percent: formik2.values?.looses ? formik2.values?.looses : null,
            //     })
            //   ).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>
      </Grid>
    </Grid>
  );
};
