import * as Config from 'config'
import h from 'h'
import * as Router from 'router'
import * as Duration from 'duration'

function labelledInput(
  labelValue: string,
  min: number,
  value: number,
  update: (n: number) => void
): Element {
  return h('label',
    { className: 'g-Form__Label',
      oninput: (e: Event) => {
        if (e.target !== null) {
          const target = e.target as HTMLInputElement
          update(parseInt(target.value) || 0)
        }
      }
    },
    labelValue,
    h('input', { className: 'g-Form__Input', type: 'number', min, value }))
}

export function view(config: Config.Config, showPage: (route: Router.Route) => void) {
  const duration = document.createTextNode(Duration.prettyPrint(Config.getDuration(config)))
  const wd = () => duration.textContent = Duration.prettyPrint(Config.getDuration(config))
  return h('div',
    { className: 'g-Layout__Page' },
      h('header', { className: 'g-Layout__Header' }, 'Tabata timer'),
      h('form',
        { className: 'g-Form'
        , onsubmit: (e: Event) => {
            e.preventDefault()
            const timerRoute: Router.Route = { name: 'timer', config }
            history.pushState({}, '', Router.toString(timerRoute))
            showPage(timerRoute)
        }},
        labelledInput('Warm Up', 0, config.warmup, n => { config.warmup = n; wd()}),
        labelledInput('Tabatas', 1, config.tabatas, n => { config.tabatas = n; wd()}),
        labelledInput('Prepare', 0, config.prepare, n => { config.prepare = n; wd()}),
        labelledInput('Cycles', 1, config.cycles, n => { config.cycles = n; wd()}),
        labelledInput('Work', 5, config.work, n => { config.work = n; wd()}),
        labelledInput('Rest', 5, config.rest, n => { config.rest = n; wd()}),
        h('div', { className: 'g-Form__Duration' }, 'Duration:', h('div', {}, duration)),
        h('button', { className: 'g-Form__Start' }, 'start'))
  )
}