import { Tool } from '../tool.js';

export class PlayPause extends Tool {
  playHTML = '<h2>Play</h2>';
  pauseHTML = '<h2>Pause</h2>';

  constructor(toolbar) {
    super(toolbar);

    const pauseButton = document.createElement('button');
    const playButton = document.createElement('button');

    this.div.appendChild(playButton);
    this.div.appendChild(pauseButton);

    pauseButton.innerHTML = this.pauseHTML;
    playButton.innerHTML = this.playHTML;

    pauseButton.style.opacity = this.sim.playing ? '100%' : '50%';
    playButton.style.opacity = this.sim.playing ? '50%' : '100%';

    pauseButton.addEventListener('click', (e) => {
      e.stopPropagation();
      this.sim.pointer.panning = undefined;
      if (this.playing) {
        this.playing = false;
        pauseButton.style.opacity = '50%';
        playButton.style.opacity = '100%';
      }
    });

    playButton.addEventListener('click', (e) => {
      if (!this.playing) {
        this.playing = true;
        pauseButton.style.opacity = '100%';
        playButton.style.opacity = '50%';
      }
    });
  }

  get playing() {
    return this.sim.playing;
  }

  set playing(playing) {
    return this.sim.playing = playing;
  }
}