import videojs from 'video.js';
import '../../../styles/time-display.css';
import { formatTimeDisplay } from '../../../helpers/helper';

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

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

  createEl() {
    const el = super.createEl('div', {
      className: 'videojs-drm-time-display'
    });
    
    el.innerHTML = `
      <span class="current-time">00:00</span> / <span class="duration">00:00</span>
    `;
    
    return el;
  }

  ready() {
    super.ready();

    this.currentTimeSpan = this.el().querySelector('.current-time');
    this.durationSpan = this.el().querySelector('.duration');

    this.setupTimeDisplay();
  }

  // Update time display
  updateTime() {
    const currentTime = formatTimeDisplay(this.player().currentTime() || 0);
    const duration = formatTimeDisplay(this.player().duration() || 0);
    
    this.currentTimeSpan.textContent = currentTime;
    this.durationSpan.textContent = duration;
  }

  setupTimeDisplay() {
    // Listen to player events
    this.player().on('timeupdate', () => this.updateTime());
    this.player().on('loadedmetadata', () => this.updateTime());
    this.player().on('durationchange', () => this.updateTime());
  }

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

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

export default TimeDisplay;



