import cans, { inject } from 'cans'
import { BrowserRouter, Route } from 'cans/router'

const app = cans()

// model
app.model({
  namespace: 'counter',
  state: {
    count: 0
  },
  actions: {
    incr() {
      this.count += 1
    },
    decr() {
      this.count -= 1
    }
  },
  computed: {
    content() {
      return `Count: ${this.count}`
    }
  }
})

// view
const Counter = inject(({ models })) => {
  return (
    <div>
      <span>{models.counter.content}</span>
      <button onClick={models.counter.incr}>+</button>
      <button onClick={models.counter.decr}>-</button>
    </div>
  )
}

// router
const route = () => (
  <BrowserRouter>
    <Route path='/' component={Counter} />
  </BrowserRouter>
)
app.route(route)

// mount the app
app.start(document.querySelector('#root'))