import { SliderComponent as Slider } from "../../../components/SliderComponent";
import { useEffect } from "react";
import {
  INITIAL,
  usePendingPointsFilters,
} from "../../../stores/usePendingPointsFilters";
import { Spin } from "antd";

export const PredictionSlider = ({ disabled, fullRange, isLoading }) => {
  const {
    filters: { prediction },
    setPrediction,
  } = usePendingPointsFilters();
  const handleAfterChange = (range) => setPrediction(range);

  useEffect(() => {
    if (!fullRange) return;

    const min = fullRange.prediction[0];
    const max = fullRange.prediction[1];

    const shouldSetFullRange =
      prediction[0] === INITIAL.prediction[0] &&
      prediction[1] === INITIAL.prediction[1];

    if (shouldSetFullRange) {
      setPrediction([min, max]);
    }
  }, [fullRange]);

  if (isLoading) {
    return (
      <div className={"flex justify-center items-center"}>
        <Spin />
      </div>
    );
  }

  return (
    <Slider
      title={"Прогнозный трафик"}
      value={prediction}
      onAfterChange={handleAfterChange}
      min={fullRange.prediction[0]}
      max={fullRange.prediction[1]}
      range
      disabled={disabled}
    />
  );
};
