import {
  EVENT_PLAY_PAUSE,
  TALL_CLASSNAME
} from '../config.js';
import {Tool} from '../tool.js';

export class PlayPause extends Tool {
  playHTML = 'Play';
  pauseHTML = 'Pause';
  pauseButton = undefined;
  playButton = undefined;

  updateButtons() {
    this.pauseButton.style.opacity = this.sim.playing ? '100%' : '50%';
    this.playButton.style.opacity = this.sim.playing ? '50%' : '100%';
  }

  setContainer(container) {
    super.setContainer(container);
    this.updateButtons();

    this.sim.div.addEventListener(EVENT_PLAY_PAUSE, () => {
      this.updateButtons();
    });
  }

  constructor(container) {
    super(container);

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

    this.pauseButton = pauseButton;
    this.playButton = playButton;

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

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

    playButton.classList.add(TALL_CLASSNAME);
    pauseButton.classList.add(TALL_CLASSNAME);

    pauseButton.addEventListener('click', () => {
      this.sim.pause();
      this.updateButtons();
    });

    playButton.addEventListener('click', () => {
      this.sim.play();
      this.updateButtons();
    });
  }
}