import React, { useState, useEffect } from 'react';
import '../Components/RangeSlider.scss';

const RangeSlider = ({
  min = 1,
  max = 100,
  step = 1,
  onChange,
  Defaultvalue,
}) => {
  const [value, setValue] = useState(min);
  const [displayValue, setDisplayValue] = useState(min);

  const handleChange = (e) => {
    const newValue = parseInt(e.target.value, 10);
    setValue(newValue);
    if (onChange) onChange(newValue);
  };
  useEffect(() => {
    setValue(Defaultvalue);
  }, [Defaultvalue]);

  useEffect(() => {
    let animationInterval;

    if (displayValue !== value) {
      const stepAmount = Math.abs(value - displayValue) / 3;
      animationInterval = setInterval(() => {
        setDisplayValue((prev) => {
          if (Math.abs(prev - value) < 1) {
            clearInterval(animationInterval);
            return value;
          }
          return prev < value
            ? prev + Math.ceil(stepAmount)
            : prev - Math.ceil(stepAmount);
        });
      }, 50);
    }

    return () => clearInterval(animationInterval);
  }, [value, displayValue]);

  const progress = ((value - min) / (max - min)) * 100;

  return (
    <div
      style={{
        fontFamily: 'Gilroy',
      }}
    >
      <div className="range-slider">
        <input
          type="range"
          min={min}
          max={max}
          step={step}
          value={value}
          onChange={handleChange}
          className="range-slider__input"
          style={{ '--progress': `${progress}%` }}
        />
      </div>
    </div>
  );
};

export default RangeSlider;