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

export const DeltaTrafficSlider = ({ fullRange }) => {
  const {
    filters: { deltaTraffic },
    setDeltaTraffic,
  } = useWorkingPointsFilters();

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

  useEffect(() => {
    const min = fullRange.deltaTraffic[0];
    const max = fullRange.deltaTraffic[1];

    if (
      deltaTraffic[0] === INITIAL.deltaTraffic[0] &&
      deltaTraffic[1] === INITIAL.deltaTraffic[1]
    ) {
      setDeltaTraffic([min, max]);
    }
  }, [fullRange, deltaTraffic]);

  return (
    <Slider
      title={"Расхождение факта с прогнозом, %"}
      value={deltaTraffic}
      onAfterChange={handleAfterChange}
      min={fullRange.deltaTraffic[0]}
      max={fullRange.deltaTraffic[1]}
      range
      showZeroMark={true}
    />
  );
};
