import {
  Button,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  TextField,
  Typography,
} from "@mui/material";
import { useFormik } from "formik";
import React, { useEffect } from "react";
import { Grid } from "../../../../components/grid/Grid";
import { ImageUpload } from "../../../../components/image-upload/ImageUpload";
import { SPACING } from "../../../../data/spacing";
import { Yup } from "../../../../lib/yup/yup";
import { fixBase64 } from "../../../../utils/toBase64";

export const ProvinceFinancialNewComplaint = () => {
  const [age, setAge] = React.useState("");

  const [complaintImages, setComplaintImages] = React.useState([]);
  const [complaintImagesBase64, setComplaintImagesBase64] = React.useState([]);

  const complaintImageHandler = (imageList, addUpdateIndex) => {
    setComplaintImages(imageList);
    setComplaintImagesBase64(imageList.map((img) => fixBase64(img.data_url)));
  };

  const handleChange = (event) => {
    setAge(event.target.value);
  };

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

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

  return (
    <Grid
      container
      gap={SPACING.SMALL}
      direction="column"
      justifyContent="space-between"
    >
      <Grid container direction="column" gap={SPACING.SMALL}>
        <FormControl fullWidth>
          <InputLabel id="demo-simple-select-label">موضوع</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={age}
            label="موضوع"
            onChange={handleChange}
          >
            <MenuItem value={10}>مغایرت درصد تلفات با واقعیت</MenuItem>
            <MenuItem value={20}>دیگر</MenuItem>
          </Select>
        </FormControl>

        <TextField
          id="description"
          label="توضیحات"
          multiline
          rows={5}
          variant="outlined"
          sx={{ width: "100%", height: "100%" }}
          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
          }
        />

        <Typography>پیوست تصویر</Typography>
        <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={!formik.isValid}>
        ثبت اطلاعات
      </Button>
    </Grid>
  );
};
