import { h, withVar, Html, Rx } from 'lib/rx'
import * as Options from 'view/options'

interface Params {
  options: Options.Model
  onSubmit: (options: Options.Model) => void
}

export function view({ options, onSubmit }: Params): Html {
  return withVar(options, (opts, updateOptions) =>
    h('form',
      { className: 'g-Form',
        onsubmit: opts.map(o =>
          (event: Event) => {
            event.preventDefault()
            onSubmit(o)
          }
        )
      },
      chordCheckbox({
        label: '', 
        checked: opts.map(o => o.major),
        onCheck: (checked => updateOptions(o => {
          o.major = checked
          return o
        }))
      }),
      chordCheckbox({ 
        label: '-', 
        checked: opts.map(o => o.minor),
        onCheck: (checked => updateOptions(o => {
          o.minor = checked
          return o
        }))
      }),
      chordCheckbox({ 
        label: '7', 
        checked: opts.map(o => o.seventh),
        onCheck: (checked => updateOptions(o => {
          o.seventh = checked
          return o
        }))
      }),
      chordCheckbox({ 
        label: '-7', 
        checked: opts.map(o => o.minorSeventh),
        onCheck: (checked => updateOptions(o => {
          o.minorSeventh = checked
          return o
        }))
      }),
      chordCheckbox({ 
        label: '7', 
        checked: opts.map(o => o.majorSeventh),
        onCheck: (checked => updateOptions(o => {
          o.majorSeventh = checked
          return o
        }))
      }),
      numberInput({ 
        label: 'BPM', 
        value: opts.map(o => o.bpm.toString()),
        onChange: (n => updateOptions(o => {
          o.bpm = n
          return o
        }))
      }),
      numberInput({ 
        label: 'Beats per Chord', 
        value: opts.map(o => o.beatsPerChord.toString()),
        onChange: (n => updateOptions(o => {
          o.beatsPerChord = n
          return o
        }))
      }),
      h('input', { type: 'submit', value: 'Play' })
    )
  )
}

interface ChordCheckboxParams {
  label: string
  checked: Rx<boolean>
  onCheck: (checked: boolean) => void
}

function chordCheckbox({ label, checked, onCheck }: ChordCheckboxParams): Html {
  return h('label',
    { className: 'g-ChordLabel' },
    h('input',
      { type: 'checkbox',
        checked,
        onchange: (event: Event) => onCheck((event.target as HTMLInputElement).checked)
      }
    ),
    label
  )
}

interface NumberInputParams {
  label: string
  value: Rx<string>
  onChange: (n: number) => void
}

function numberInput({ label, value, onChange }: NumberInputParams): Html {
  return h('label',
    h('input',
      { type: 'number',
        value,
        onchange: (event: Event) => {
          const n = parseInt((event.target as HTMLInputElement).value)
          if (typeof n === 'number') {
            onChange(n)
          }
        }
      }
    ),
    label
  )
}