const choo = require('../../')
const html = require('../../html')

const app = choo()
app.model({
  namespace: 'input',
  state: {
    title: 'my demo app'
  },
  reducers: {
    update: (state, data) => ({ title: data.payload })
  },
  effects: {
    update: (state, data, send, done) => {
      document.title = data.payload
      done()
    }
  }
})

const mainView = (state, prev, send) => {
  return html`
    <main class="app">
      <h1>${state.input.title}</h1>
      <label>Set the title</label>
      <input
        type="text"
        placeholder=${state.input.title}
        oninput=${(e) => send('input:update', { payload: e.target.value })}>
    </main>
  `
}

app.router(['/', mainView])
const tree = app.start()
document.body.appendChild(tree)