class RSVPControls extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })
    // const shadow = document.createElement('div')
    shadow.innerHTML = `
      <button action="prevSentence">&lt;&lt;</button>
      <button action="prevWord">&lt;</button>
      <button action="stop">stop</button>
      <button action="playpause">start</button>
      <button action="nextWord">&gt;</button>
      <button action="nextSentence">&gt;&gt;</button>
    `
    this._root = shadow
    // this.appendChild(shadow)
  }

  connectedCallback() {
    for (let button of this._root.querySelectorAll('button')) {
      button.addEventListener('click', e => {
        let action = e.target.getAttribute('action')
        let evt = new CustomEvent('control-event', { detail: { action } })
        this.dispatchEvent(evt)
      })
    }
  }

  updateUI(chapter, player) {
    this.getButton('prevSentence').disabled = !chapter.hasPrevSentence()
    this.getButton('prevWord').disabled = !chapter.hasPrevWord()
    this.getButton('nextWord').disabled = !chapter.hasNextWord()
    this.getButton('nextSentence').disabled = !chapter.hasNextSentence()
    this.getButton('playpause').innerText = player.playing ? 'pause' : 'start'
  }

  getButton(name) {
    for (let btn of this._root.querySelectorAll('button')) {
      if (btn.getAttribute('action') === name) {
        return btn
      }
    }
    return null
  }
}

window.customElements.define('rsvp-controls', RSVPControls)