import h, { classNames } from 'lib/h'
import * as dom from 'lib/dom'
import { Options } from 'view/options'
import * as chord from 'chord'
import * as layout from 'view/layout'

export function view(options: Options): Element[] {
  let chords = h('div', 
    { className: 'g-Play' }, 
    chordNode(),
    chordNode(options),
    chordNode(options)
  )

  let chordBeat = 1

  dom.triggerAnimation(chords.children[1] as HTMLElement, 'g-Chord--Beat')
  setInterval(() => {
    if (chordBeat == options.beatsPerChord) {
      shiftChords(chords, options)
      chords.children[0].classList.remove('g-Chord--Beat')
      dom.triggerAnimation(chords as HTMLElement, 'g-Play--Shift')
      dom.triggerAnimation(chords.children[1] as HTMLElement, 'g-Chord--Beat')
      chordBeat = 1
    } else {
      dom.triggerAnimation(chords.children[1] as HTMLElement, 'g-Chord--Beat')
      chordBeat += 1
    }
  }, 60 / options.bpm * 1000)

  return layout.view(chords)
}

/* Shift chords and generate a new random one.
 */
function shiftChords(chords: Element, options: Options) {
  chords.removeChild(chords.children[0])
  chords.appendChild(chordNode(options))
}

function chordNode(options?: Options): Element {
  let [base, alteration] = options ? chord.generate(options) : ['', '']

  return h('div', 
    { className: 'g-Chord' }, 
    base,
    h('sup', {}, alteration)
  )
}