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

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

  constructor(toolbar) {
    super(toolbar);

    // For now, use a regular button
    const button = document.createElement('button');
    button.style.width = '50px';
    button.style.height = '50px';
    this.div.appendChild(button);
    if (this.playing) {
      button.innerHTML = this.pauseHTML;
    } else {
      button.innerHTML = this.playHTML;
    }

    button.addEventListener('click', (e) => {
      e.stopPropagation();
      if (this.playing) {
        button.innerHTML = this.playHTML;
        this.playing = false;
      } else {
        button.innerHTML = this.pauseHTML;
        this.playing = true;
      }
    });
  }

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

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