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

app.model({
  state: {
    title: 'existing text',
    isValid: true,
    isEditing: false
  },
  reducers: {
    update: (data, state) => {
      return {
      	title: data,
      	isValid: data.length > 5 && data.length < 15
    	}
    },
    focus: (data, state) => {
      return {
        isEditing: data
    	}
    },
    capitalize: (data, state) => {
      return {
      	title: state.title.toUpperCase()
    	}
    }
  }
})

const mainView = (state, prev, send) => html`
  <main>
    <input
      type="text"
      style="width: 100%; background-color: ${state.isValid ? 'lightgreen' : 'pink'}"
      onload=${element => element.value = state.title}
      oninput=${event => send('update', event.target.value)}
      ${state.isEditing ? 'data-value' : 'value'}=${state.title}
      onfocus=${event => send('focus', true)}
      onblur=${event => send('focus', false)}
    />
    <button onclick=${e => send('capitalize')}>Capitalize</button>
  </main>
`

app.router((route) => [
  route('/', mainView)
])

const tree = app.start()
document.body.appendChild(tree)