import { SPACING } from "../../../../data/spacing";
import { Grid } from "../../../../components/grid/Grid";
import {
  Button,
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
  Slider,
} from "@mui/material";
import { useState } from "react";
import { Yup } from "../../../../lib/yup/yup";
import { useFormik } from "formik";
import { useDispatch, useSelector } from "react-redux";
import { PropTypes } from "prop-types";
import {
  auctionFilterByAge,
  auctionFilterByPrice,
  auctionFilterByQuantity,
  auctionFilterByRace,
  auctionFilterByWeight,
} from "../../../../lib/redux/slices/auctionSlice";
import {
  DRAWER,
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";
import { useEffect } from "react";
import { avicultureGetChickenPrice } from "../../../aviculture/services/aviculture-get-chicken-price";

export const AuctionFilterRequestAdvance = ({
  minQuantity = 0,
  maxQuantity = 1000,
}) => {
  const dispatch = useDispatch();
  const { avicultureChickenPrice } = useSelector(
    (state) => state.avicultureSlice
  );

  useEffect(() => {
    dispatch(LOADING_START());
    dispatch(avicultureGetChickenPrice());
    dispatch(LOADING_END());
  }, []);

  const formik = useFormik({
    initialValues: {
      age: "",
      race: "همه",
    },
    validationSchema: Yup.object({
      age: Yup.number().typeError("لطفا سن مرغ را وارد کنید."),
    }),
  });

  const [number, setNumber] = useState([minQuantity || 0, maxQuantity || 1000]);
  const [weight, setWeight] = useState([1, 5]);
  const [age, setAge] = useState([30, 70]);
  const [price, setPrice] = useState([
    avicultureChickenPrice?.floorPrice || 0,
    avicultureChickenPrice?.ceilingPrice || 100000,
  ]);

  useEffect(() => {
    if (
      avicultureChickenPrice?.floorPrice &&
      avicultureChickenPrice?.ceilingPrice
    ) {
      setPrice([
        avicultureChickenPrice.floorPrice,
        avicultureChickenPrice.ceilingPrice,
      ]);
    }
  }, [avicultureChickenPrice]);

  const handleChangeNumber = (event, newNumber) => {
    setNumber(newNumber);
  };

  const handleChangeWeight = (event, newWeight) => {
    setWeight(newWeight);
  };

  const handleChangeAge = (event, newAge) => {
    setAge(newAge);
  };

  const handleChangePrice = (event, newPrice) => {
    setPrice(newPrice);
  };

  return (
    <Grid
      container
      p={SPACING.MEDIUM}
      direction="column"
      flex="1"
      justifyContent="space-between"
      gap={SPACING.SMALL}
    >
      <Grid container direction="column" gap={SPACING.SMALL}>
        <Grid>
          <FormControl fullWidth>
            <InputLabel id="demo-simple-select-label">نژاد مرغ</InputLabel>
            <Select
              labelId="demo-simple-select-label"
              id="race"
              label="نژاد مرغ"
              value={formik.values.race}
              error={formik.touched.race ? Boolean(formik.errors.race) : null}
              onChange={(e) => {
                formik.setFieldValue("race", e.target.value);
              }}
              onBlur={formik.handleBlur}
            >
              <MenuItem value={"همه"}>همه</MenuItem>
              <MenuItem value={"آرین"}>آرین</MenuItem>
              <MenuItem value={"راس"}>راس</MenuItem>
              <MenuItem value={"آربراکرز (آپلاس)"}>آربراکرز (آپلاس)</MenuItem>
              <MenuItem value={"کاب"}>کاب</MenuItem>
              <MenuItem value={"هوبارد"}>هوبارد</MenuItem>
            </Select>
            <FormHelperText>
              {formik.touched.race && Boolean(formik.errors.race)
                ? formik.errors.race
                : null}
            </FormHelperText>
          </FormControl>
        </Grid>
        {number &&
        Array.isArray(number) &&
        number[0] !== undefined &&
        number[0] !== Infinity &&
        minQuantity !== undefined &&
        maxQuantity !== undefined ? (
          <Grid display="flex" gap={SPACING.SMALL}>
            تعداد:
            <Slider
              size="small"
              getAriaLabel={() => "تعداد"}
              value={number}
              min={minQuantity || 0}
              max={maxQuantity || 1000}
              step={100}
              onChange={handleChangeNumber}
              valueLabelDisplay="auto"
            />
          </Grid>
        ) : (
          ""
        )}

        <Grid display="flex" gap={SPACING.SMALL}>
          سن:
          <Slider
            size="small"
            value={age}
            min={30}
            max={70}
            onChange={handleChangeAge}
            valueLabelDisplay="auto"
          />
        </Grid>

        <Grid display="flex" gap={SPACING.SMALL}>
          وزن:
          <Slider
            size="small"
            getAriaLabel={() => "Temperature range"}
            value={weight}
            min={1}
            max={5}
            onChange={handleChangeWeight}
            valueLabelDisplay="auto"
          />
        </Grid>

        <Grid display="flex" gap={SPACING.SMALL}>
          قیمت:
          <Slider
            size="small"
            getAriaLabel={() => "سقف و کف قیمت امروز"}
            value={price}
            step={5000}
            min={avicultureChickenPrice?.floorPrice || 0}
            max={avicultureChickenPrice?.ceilingPrice || 100000}
            onChange={handleChangePrice}
            valueLabelDisplay="auto"
          />
        </Grid>
      </Grid>

      <Grid>
        <Button
          fullWidth
          variant="contained"
          onClick={() => {
            dispatch(auctionFilterByQuantity(number));
            dispatch(auctionFilterByAge(age));
            dispatch(
              auctionFilterByRace(
                formik.values.race === "همه" ? "" : formik.values.race
              )
            );
            dispatch(auctionFilterByWeight(weight));
            dispatch(auctionFilterByPrice(price));
            dispatch(DRAWER({ right: false, bottom: false, content: null }));
          }}
        >
          ثبت اطلاعات
        </Button>
      </Grid>
    </Grid>
  );
};

AuctionFilterRequestAdvance.propTypes = {
  minQuantity: PropTypes.number,
  maxQuantity: PropTypes.number,
};
