const Range = () => {
  const elRange = document.querySelectorAll('[data-widget="range"]');

    elRange.forEach(range => {
      const rangeInput = document.querySelector('[data-input="range"]');
      const rangeValue = document.querySelector('[data-value="range"]');
      const itemsLabel = document.querySelectorAll('.range__item');

      rangeInput.addEventListener('input', (e) => {
        e.preventDefault();
        updateProgress(range, rangeInput);
        rangeValue.value = rangeInput.value;
      });

      itemsLabel.forEach(item => {
        item.addEventListener('click', () => {
          rangeInput.value = Number(item.dataset.value);
          rangeValue.value = Number(item.dataset.value);
          updateProgress(range, rangeInput);
        });
      });

      updateProgress(range, rangeInput);
    });
};

function updateProgress(slider, rangeInput) {
  let progress = slider.querySelector('[data-progress="range"]');
  let circles = slider.querySelectorAll('[data-circle="range"]');

  circles.forEach(item => {
    if (item.dataset.circleId <= rangeInput.value) {
      item.classList.add('active');
    } else {
      item.classList.remove('active');
    }
  });

  progress.style.width = getSliderPercent(rangeInput) * 100 + "%";
}

function getSliderPercent(slider) {
  const range = slider.max - slider.min;
  const absValue = slider.value - slider.min;
  return absValue / range;
}

export default Range;