import {TOOL_INFO_CLASSNAME, WIDE_CLASSNAME} from '../config.js';
import {Tool} from '../tool.js';

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

  get timeText() {
    let time = this.sim.time;
    // Time in seconds
    const s = time % 60;
    time = (time - s) / 60;
    const m = time % 60;
    time = (time - m) / 60;
    const h = time % 24;
    time = (time - h) / 24;
    const d = time;
    time -= m * 60;

    const ms = (s - Math.floor(s)) * 1000;
    return [
      d || undefined,
      h.toString().padStart(2, '0'),
      m.toString().padStart(2, '0'),
      [
        s.toFixed(0).padStart(2, '0'),
        ms.toFixed(0).padStart(3, '0'),
      ].join('.')
    ].filter(x => x !== undefined).join(':');
  }

  frame() {
    if (this.currentTimeEl) {
      this.currentTimeEl.innerHTML = this.timeText;
    }
  }

  constructor(toolbar) {
    super(toolbar);

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

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

    currentTime.classList.add(TOOL_INFO_CLASSNAME);
    currentTime.classList.add(WIDE_CLASSNAME);

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

    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', () => {
      if (!this.playing) {
        this.playing = true;
        pauseButton.style.opacity = '100%';
        playButton.style.opacity = '50%';
      }
    });
  }

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

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