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

// View

export function view(): Element[] {
  let opts = options.load()

  return layout.view(
    h('form',
      { 
        className: 'g-Form', 
        onsubmit 
      },
      labelInput({ type: 'checkbox', name: 'major', label: 'Major', checked: opts.major }),
      labelInput({ type: 'checkbox', name: 'minor', label: 'Minor', checked: opts.minor }),
      labelInput({ type: 'number', name: 'bpm', label: 'BPM', value: opts.bpm.toString() }),
      labelInput({ type: 'number', name: 'beatsPerChord', label: 'Beats per Chord', value: opts.beatsPerChord.toString() }),
      h('input', { type: 'submit', value: 'Play' })
    )
  )
}

function onsubmit(event: Event): void {
  event.preventDefault()
  let input = (name: String) => document.querySelector(`input[name="${name}"]`) as HTMLInputElement
  let opts = {
    major: input('major').checked,
    minor: input('minor').checked,
    bpm: parseInt(input('bpm').value),
    beatsPerChord: parseInt(input('beatsPerChord').value)
  }
  options.save(opts)
  dom.show(play.view(opts))
}

type LabelInputParams = {
  type: string,
  name: string,
  label: string,
  checked?: boolean,
  value?: string
}

function labelInput({ type, name, label, checked, value }: LabelInputParams) {
  return h('label',
    {},
    h('input', { type, name, checked, value }),
    label
  )
}