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 
      },
      chordCheckbox({ name: 'major', label: '', checked: opts.major }),
      chordCheckbox({ name: 'minor', label: '-', checked: opts.minor }),
      chordCheckbox({ name: 'seventh', label: '7', checked: opts.seventh }),
      chordCheckbox({ name: 'minorSeventh', label: '-7', checked: opts.minorSeventh }),
      chordCheckbox({ name: 'majorSeventh', label: '7', checked: opts.majorSeventh }),
      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 chordCheckbox({ name, label, checked }: any): Element {
  return labelInput({ className: 'g-ChordLabel', type: 'checkbox', name, label, checked })
}

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,
    seventh: input('seventh').checked,
    minorSeventh: input('minorSeventh').checked,
    majorSeventh: input('majorSeventh').checked,
    bpm: parseInt(input('bpm').value),
    beatsPerChord: parseInt(input('beatsPerChord').value)
  }
  options.save(opts)
  dom.show(play.view(opts))
}

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

function labelInput({ className, type, name, label, checked, value }: LabelInputParams) {
  return h('label',
    className !== undefined ? { className } : {},
    h('input', { type, name, checked, value }),
    label
  )
}