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

export const FilterSlider = ({ filterRange, disabled, fullRange, title, filterKey, dynamicKey }) => {

  const { setFilterWithKey } = usePendingPointsFilters();
  const handleAfterChange = (range) => setFilterWithKey(range, filterKey);

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

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

    const shouldSetFullRange =
      filterRange[0] === INITIAL[`${filterKey}__gt`] &&
      filterRange[1] === INITIAL[`${filterKey}__lt`];

    const shouldSetDynamicKeyRange =
      (filterRange[0] === undefined &&
      filterRange[1] === undefined) ||
      (filterRange[0] === 0 &&
      filterRange[1] === 0);

    if (shouldSetFullRange || (shouldSetDynamicKeyRange && dynamicKey)) {
      setFilterWithKey([min, max], filterKey);
    }
  }, [fullRange]);

  return (
    <Slider
      title={title}
      value={filterRange}
      onAfterChange={handleAfterChange}
      min={fullRange[0]}
      max={fullRange[1]}
      range
      disabled={disabled}
    />
  );
};
