import { h, withVar, mount } from 'lib/rx'
import * as Form from 'view/form'
import * as Play from 'view/play'
import * as Options from 'view/options'

enum Page {
  Form,
  Play
}

mount(
  withVar(Page.Form, (page, updatePage) => [
    h('header',
      { onclick: () => updatePage(_ => Page.Form) },
      'Chords'
    ),
    page.map(p =>
      p === Page.Form
        ? Form.view({
            options: Options.load(),
            onSubmit: (options: Options.Model) => {
              Options.save(options)
              updatePage(_ => Page.Play)
            }
          })
        : Play.view({
          options: Options.load()
        })
    )
  ])
)