import { useState, useRef } from "react";
import RangeSlider from "react-range-slider-input";
// import "react-range-slider-input/dist/style.css";
import "./multiRamgeSlider.css";

interface MultiRangeSliderProps {
  onChange?: () => void;
  min: number;
  max: number;
}

const MultiRangeSlider = ({ min, max, onChange }: MultiRangeSliderProps) => {
  const [firstValue, setFirstValue] = useState(min);
  const [secondValue, setSecondValue] = useState(max);

  const handleOnRangeInputChange = (e: [a: number, b: number]) => {
    setFirstValue(e[0]);
    setSecondValue(e[1]);
  };

  return (
    <div className="px-2">
      <div className="flex justify-between p-3 bg-white rounded-2xl relative flex-col">
        <div className="flex justify-between">
          <input
            key={firstValue}
            type="number"
            onChange={(e) => console.log("e", e.target.value)}
            defaultValue={firstValue}
            className="focus:outline-none input_number"
          />
          <input
            key={secondValue}
            type="number"
            defaultValue={secondValue}
            className="focus:outline-none appearance-none input_number text-right"
          />
        </div>
        <RangeSlider
          min={min}
          max={max}
          value={[firstValue, secondValue]}
          className="absolute bottom-0 left-2 w-[calc(100%-16px)] z-20"
          onInput={handleOnRangeInputChange}
        />
      </div>
    </div>
  );
};

export default MultiRangeSlider;
