import { SliderComponent as Slider } from "../../components/SliderComponent";
import { useFilters } from "../../stores/useFilters";
import { useQuery } from "@tanstack/react-query";
import { api } from "../../api";
import { useEffect } from "react";
import { useHasManualEdits } from "../../stores/usePointSelection";

export const PredictionSlider = () => {
  const { filters, setPrediction } = useFilters();
  const hasManualEdits = useHasManualEdits();
  const { data } = useQuery(["max-min"], async () => {
    const { data } = await api.get(`/api/placement_points/filters`);

    return data;
  });

  const handleAfterChange = (range) => setPrediction(range);

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

    const min = data.prediction_current[0];
    const max = data.prediction_current[1];

    setPrediction([min, max]);
  }, [data]);

  // if (!data) return null;

  return (
    <Slider
      title={"Прогнозный трафик, чел."}
      value={filters.prediction}
      onAfterChange={handleAfterChange}
      min={200}
      max={299}
      range
      disabled={hasManualEdits}
    />
  );
};