import { h, withState, 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(
  withState(Page.Form, page => [
    h('header',
      { onclick: () => page.update(_ => Page.Form) },
      'Chords'
    ),
    page.map(p =>
      p === Page.Form
        ? Form.view({
            options: Options.load(),
            onSubmit: (options: Options.Model) => {
              Options.save(options)
              page.update(_ => Page.Play)
            }
          })
        : Play.view({
          options: Options.load()
        })
    )
  ])
)