import React from 'react'
import ReactDOM from 'react-dom'
import feeble, { connect } from 'feeble'

// 1. Create a app
const app = feeble()

// 2.1 Create model
const counter = feeble.model({
  namespace: 'count',
  state: 0,
})

// 2.2 Create action creators
counter.action('increment')
counter.action('decrement')

// 2.3 Create reducer
counter.reducer(on => {
  on(counter.increment, state => state + 1)
  on(counter.decrement, state => state - 1)
})

// 2.4 Attach model to the app
app.model(counter)

// 3. Create view
const App = connect(({ count }) => ({
  count
}))(function({ dispatch, count }) {
  return (
    <div>
      <h2>{ count }</h2>
      <button key="inc" onClick={() => { dispatch(counter.increment()) }}>+</button>
      <button key="dec" onClick={() => { dispatch(counter.decrement()) }}>-</button>
    </div>
  )
})

// 4. Mount the view
const tree = app.mount(<App />)

// 5. Render to DOM
ReactDOM.render(tree, document.getElementById('root'))