'use strict'
 
var document = require('global/document')
var extend = require('xtend')
var main = require('main-loop')
var observ = require('observ')
var send = require('value-event/event')
var unified = require('unified-state')
var h = require('virtual-dom/h')
var virtualize = require('vdom-virtualize')
var Delegator = require('dom-delegator')
 
function App () {
  return unified({
    value: observ(0),
    channels: {
      clicks: incrementCounter
    }
  })
}
 
function incrementCounter (state) {
  state.value.set(state.value() + 1)
}
 
App.render = function render(state) {
  return h('div.counter', [
    'The state ', h('code', 'clickCount'),
    ' has value: ' + state.value + '.', h('input.button', {
      type: 'button',
      value: 'Click me!',
      'ev-click': send(state.channels.clicks)
    })
  ])
}
 
var target = document.body.firstChild
 
var opts = {
  initialTree: virtualize(target),
  target: target
}
 
Delegator(opts)
 
var app = App()
var loop = main(app, App.render, extend({
  diff: require('virtual-dom/diff'),
  create: require('virtual-dom/create-element'),
  patch: require('virtual-dom/patch')
}, opts))
 
app(loop.update)
app.set(app())