import videojs from 'video.js';
import '../../../styles/volume-slider.css';

const Component = videojs.getComponent('Component');

class VolumeSlider extends Component {
  constructor(player, options) {
    super(player, options);
  }

  createEl() {
    const el = super.createEl('div', {
      className: 'videojs-drm-volume-slider-container'
    });

    this.volumeInput = document.createElement("input");
    this.volumeInput.type = "range";
    this.volumeInput.className = "videojs-drm-volume-slider";
    this.volumeInput.min = "0";
    this.volumeInput.max = "1";
    this.volumeInput.step = "0.01";
    this.volumeInput.value = "1";
    this.volumeInput.setAttribute("aria-label", this.localize("volume"));
    el.appendChild(this.volumeInput);
    
    return el;
  }

  ready() {
    super.ready();
    this.setupVolumeSlider();
  }

  setupVolumeSlider() {
    const slider = this.volumeInput || this.el().querySelector('.videojs-drm-volume-slider');
    
    // Handle slider input
    slider.addEventListener('input', (e) => {
      const volume = parseFloat(e.target.value);
      this.player().volume(volume);
      this.updateSliderVisual(slider, volume);
    });

    // Listen to player volume changes
    this.player().on('volumechange', () => {
      const volume = this.player().volume();
      slider.value = volume;
      this.updateSliderVisual(slider, volume);
    });

    // Initialize visual state
    this.updateSliderVisual(slider, this.player().volume());
  }

  updateSliderVisual(slider, volume) {
    // Update slider background to show filled portion
    const percentage = volume * 100;
    slider.style.background = `linear-gradient(to right, #ff6b6b 0%, #ff6b6b ${percentage}%, #333 ${percentage}%, #333 100%)`;
  }

  dispose() {
    // Events are removed as components are disposed
    super.dispose();
  }
}

// Register the component
videojs.registerComponent('VolumeSlider', VolumeSlider);

export default VolumeSlider;



