import {
  Button,
  Checkbox,
  Divider,
  FormControl,
  FormControlLabel,
  FormLabel,
  Radio,
  RadioGroup,
  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 CloseFileSubmitInfo = () => {
  const [closeFileWeightWithoutBar, setCloseFileWeightWithoutBar] =
    React.useState([]);
  const [closeFileWeightWithoutBarBase64, setCloseFileWeightWithoutBarBase64] =
    React.useState([]);

  const closeFileWeightWithoutBarHandler = (imageList, addUpdateIndex) => {
    setCloseFileWeightWithoutBar(imageList);
    setCloseFileWeightWithoutBarBase64(
      imageList.map((img) => fixBase64(img.data_url))
    );
  };

  const [closeFileWeightWithBar, setCloseFileWeightWithBar] = React.useState(
    []
  );
  const [closeFileWeightWithBarBase64, setCloseFileWeightWithBarBase64] =
    React.useState([]);

  const closeFileWeightWithBarHandler = (imageList, addUpdateIndex) => {
    setCloseFileWeightWithBar(imageList);
    setCloseFileWeightWithBarBase64(
      imageList.map((img) => fixBase64(img.data_url))
    );
  };

  const [closeWithNoOperation, setCloseWithNoOperation] = React.useState(false);
  const handleToggle = () => {
    setCloseWithNoOperation(!closeWithNoOperation);
  };

  const isFormValid = (closeWithNoOperation) => {
    if (closeWithNoOperation) {
      return false;
    } else {
      return !formik.isValid;
    }
  };

  const formik = useFormik({
    initialValues: {
      pultrypenalty: "",
      killHousepenalty: "",
      image: "",
      carweightwithbar: "",
      carweightwithoutbar: "",
      payablemoney: "",
      realLoadCount: "",
    },
    validationSchema: Yup.object({
      pultrypenalty: Yup.number().typeError("لطفا عدد وارد کنید!"),
      killHousepenalty: Yup.number().typeError("لطفا عدد وارد کنید!"),
      carweightwithbar: Yup.number().typeError("لطفا عدد وارد کنید!"),
      carweightwithoutbar: Yup.number().typeError("لطفا عدد وارد کنید!"),
      payablemoney: Yup.number().typeError("لطفا عدد وارد کنید!"),
      realLoadCount: Yup.number().typeError("لطفا عدد وارد کنید!"),
      image: Yup.string().typeError("لطفا تصویر را وارد کنید!"),
    }),
  });

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

  return (
    <Grid
      className="slaughter-new-request-form"
      container
      gap={SPACING.SMALL}
      direction="column"
      flex="1"
      justifyContent="space-between"
    >
      <Grid container gap={SPACING.SMALL} direction="column">
        <FormControlLabel
          control={<Checkbox onClick={handleToggle} />}
          label="کد بار بدون اقدام بسته شود"
        />

        <Divider />
        <Grid
          sx={{
            opacity: closeWithNoOperation ? "60%" : "100%",
            color: closeWithNoOperation ? "red" : "black",
          }}
          container
          gap={SPACING.SMALL}
          direction="column"
        >
          <Typography variant="body1">اطلاعات جریمه</Typography>
          <TextField
            disabled={closeWithNoOperation}
            fullWidth
            id="pultrypenalty"
            label="جریمه مرغدار"
            value={formik.values.pultrypenalty}
            error={
              formik.touched.pultrypenalty
                ? Boolean(formik.errors.pultrypenalty)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.pultrypenalty &&
              Boolean(formik.errors.pultrypenalty)
                ? formik.errors.pultrypenalty
                : null
            }
            autoComplete="current-password"
            variant="outlined"
          />

          <Typography variant="body2" color="primary">
            پیشنهاد قیمت: 1400,000,000
          </Typography>

          <TextField
            disabled={closeWithNoOperation}
            fullWidth
            id="killHousepenalty"
            label="جریمه کشتارگاه"
            value={formik.values.killHousepenalty}
            error={
              formik.touched.killHousepenalty
                ? Boolean(formik.errors.killHousepenalty)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.killHousepenalty &&
              Boolean(formik.errors.killHousepenalty)
                ? formik.errors.killHousepenalty
                : null
            }
            autoComplete="current-password"
            variant="outlined"
          />

          <Typography variant="body2" color="primary">
            پیشنهاد قیمت: 1400,000,000
          </Typography>

          <Divider />

          <Typography variant="body1">اطلاعات بار</Typography>

          <TextField
            disabled={closeWithNoOperation}
            size="small"
            fullWidth
            id="realLoadCount"
            label="تعداد واقعی بارگیری"
            value={formik.values.realLoadCount}
            error={
              formik.touched.realLoadCount
                ? Boolean(formik.errors.realLoadCount)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.realLoadCount &&
              Boolean(formik.errors.realLoadCount)
                ? formik.errors.realLoadCount
                : null
            }
            autoComplete="current-password"
            variant="outlined"
          />

          <TextField
            disabled={closeWithNoOperation}
            size="small"
            fullWidth
            id="carweightwithoutbar"
            label="وزن ماشین بدون بار"
            value={formik.values.carweightwithoutbar}
            error={
              formik.touched.carweightwithoutbar
                ? Boolean(formik.errors.carweightwithoutbar)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.carweightwithoutbar &&
              Boolean(formik.errors.carweightwithoutbar)
                ? formik.errors.carweightwithoutbar
                : null
            }
            autoComplete="current-password"
            variant="outlined"
          />

          <TextField
            disabled={closeWithNoOperation}
            size="small"
            fullWidth
            id="carweightwithbar"
            label="وزن ماشین با بار"
            value={formik.values.carweightwithbar}
            error={
              formik.touched.carweightwithbar
                ? Boolean(formik.errors.carweightwithbar)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.carweightwithbar &&
              Boolean(formik.errors.carweightwithbar)
                ? formik.errors.carweightwithbar
                : null
            }
            autoComplete="current-password"
            variant="outlined"
          />

          <Grid
            container
            direction="column"
            alignItems="start"
            gap={SPACING.SMALL}
          >
            <Typography variant="body2">
              تصویر سند وزن خودرو بدون بار
            </Typography>
            <ImageUpload
              disabled={closeWithNoOperation}
              id="image"
              onChange={closeFileWeightWithoutBarHandler}
              images={closeFileWeightWithoutBar}
              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
              }
            />
            <Typography variant="body2">تصویر سند وزن خودرو با بار</Typography>

            <ImageUpload
              disabled={closeWithNoOperation}
              id="image"
              onChange={closeFileWeightWithBarHandler}
              images={closeFileWeightWithBar}
              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>

          <Divider />

          <TextField
            disabled={closeWithNoOperation}
            fullWidth
            id="payablemoney"
            label="مبلغ قابل پرداخت"
            value={formik.values.payablemoney}
            error={
              formik.touched.payablemoney
                ? Boolean(formik.errors.payablemoney)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.payablemoney && Boolean(formik.errors.payablemoney)
                ? formik.errors.payablemoney
                : null
            }
            autoComplete="current-password"
            variant="outlined"
          />

          <Typography variant="body2" color="primary">
            پیشنهاد قیمت: 1400,000,000
          </Typography>

          <Typography variant="body1" color="primary">
            مبلغ قابل پرداخت: 1400,000,000
          </Typography>

          <FormControl disabled={closeWithNoOperation}>
            <FormLabel id="demo-radio-buttons-group-label">
              نوع پرداخت
            </FormLabel>
            <RadioGroup
              aria-labelledby="demo-radio-buttons-group-label"
              defaultValue="cash"
              name="radio-buttons-group"
            >
              <FormControlLabel value="cash" control={<Radio />} label="نقدی" />
              <FormControlLabel
                value="credit"
                control={<Radio />}
                label="زماندار"
              />
            </RadioGroup>
          </FormControl>
        </Grid>

        <Button
          disabled={isFormValid(closeWithNoOperation)}
          variant="contained"
        >
          ثبت
        </Button>
      </Grid>
    </Grid>
  );
};
