import * as m from 'mithril'
import * as stream from 'mithril/stream'

interface State {
  error: boolean
  counter: number
}

// state
const counter = stream(0)
const error = stream(false)
const state: stream.Stream<State> = stream
  .merge([counter, error])
  .map(([counter, error]: [number, boolean]) => {
    return {
      counter,
      error
    }
  })

const getState = () => state()

// action
const updateCounter = (n: number) => counter(n)
const setError = (exists: boolean) => error(exists)

// .. usecase, can have Promise or callback for progress update to m.redraw
const updateCounterUseCase = (n: number) => {
  if (n >= -10 && n <= 10) {
    setError(false)
    updateCounter(n)
  } else {
    setError(true)
  }
}

const appRoot = document.createElement('div')
appRoot.id = 'app'
document.body.appendChild(appRoot)

const Home: m.Component<
  {},
  {
    getState: () => State
    updateCounter: (n: number) => void
  }
> = {
  oninit: vnode => {
    vnode.state = {
      getState,
      updateCounter: updateCounterUseCase
    }
  },
  view: vnode => {
    console.log('redraw')
    const state = vnode.state.getState()
    const { updateCounter } = vnode.state
    return m('', [
      m('h1', 'Home route. ' + state.counter),
      m('div', state.error ? 'You are out of bounds, stop it!' : 'You are OK!'),
      m(
        'button',
        {
          onclick: (e: MouseEvent) => updateCounter(state.counter - 1),
          onmousemove: (e: MouseEvent) => {
            e.redraw = false
          }
        },
        'Decrement'
      ),
      m(
        'button',
        { onclick: (e: MouseEvent) => updateCounter(state.counter + 1) },
        'Increment'
      )
    ])
  }
}

m.route(appRoot, 'home', {
  home: Home
})