import { SPACING } from "../../../../data/spacing";
import UploadIcon from "@mui/icons-material/Upload";
import { Grid } from "../../../../components/grid/Grid";
import { Button, Card, TextField, Typography } from "@mui/material";
import { useFormik } from "formik";
import { Yup } from "../../../../lib/yup/yup";
import { useEffect, useState } from "react";

export const AvicultureBarForm = () => {
  const [barWeight, setbarWeight] = useState(0);
  const formik = useFormik({
    initialValues: {
      firstweight: "",
      lastweight: "",
    },
    validationSchema: Yup.object({
      firstweight: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا عدد وارد کنید!"),
      lastweight: Yup.number()
        .required("این فیلد اجباری است!")
        .typeError("لطفا وزن را وارد کنید!"),
    }),
  });

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

  useEffect(() => {
    const numFirstWeight = Number(formik.values.firstweight);
    const numLastWeight = Number(formik.values.lastweight);
    if (numFirstWeight && numLastWeight) {
      if (numFirstWeight < numLastWeight) {
        setbarWeight(numLastWeight - numFirstWeight);
      } else {
        setbarWeight(0);
      }
    }
  }, [formik.values.firstweight, formik.values.lastweight]);

  return (
    <>
      <Card>
        <Grid
          sx={{ alignItems: "baseline" }}
          container
          direction={"column"}
          alignItems="center"
          justifyContent={"center"}
          gap={SPACING.SMALL}
          p={SPACING.MEDIUM}
        >
          <Grid container gap={SPACING.SMALL}>
            <TextField
              id="firstweight"
              label="وزن ماشین بدون بار باسکول شده"
              variant="outlined"
              value={formik.values.firstweight}
              error={
                formik.touched.firstweight
                  ? Boolean(formik.errors.firstweight)
                  : null
              }
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              helperText={
                formik.touched.firstweight && Boolean(formik.errors.firstweight)
                  ? formik.errors.firstweight
                  : null
              }
            />
            <Button variant="outlined" startIcon={<UploadIcon />}>
              بارگذاری
            </Button>
            <TextField
              id="lastweight"
              label="وزن ماشین با بار باسکول شده"
              variant="outlined"
              value={formik.values.lastweight}
              error={
                formik.touched.lastweight
                  ? Boolean(formik.errors.lastweight)
                  : null
              }
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              helperText={
                formik.touched.lastweight && Boolean(formik.errors.lastweight)
                  ? formik.errors.lastweight
                  : null
              }
            />
            <Button variant="outlined" startIcon={<UploadIcon />}>
              بارگذاری
            </Button>

            <Typography>وزن بار: {barWeight} کیلوگرم</Typography>
          </Grid>
        </Grid>
        <Button
          sx={{ marginBottom: "30px" }}
          variant="outlined"
          disabled={!formik.isValid}
        >
          ثبت
        </Button>
      </Card>
    </>
  );
};
