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

const pages = [
  { title : 'Bear', content : 'I\'m a bear', media : 'http://placebear.com/600/400' , slug : 'bear' },
  { title : 'Kitten', content : 'Meow', media : 'http://placekitten.com/600/400' , slug : 'kitten' }
]

app.model({
  state: {
    currentPage: pages[0]
  },
  reducers: {
    updatePage: (data, state) => ({ currentPage: data })
  }
})

const menu = (state, prev, send) => html`
	<nav>
    <ul>
      ${pages.map((page,index,array) => html`<li><button onclick=${(e) => send('updatePage', page)}>${page.title}</button></li>`)}
    </ul>
  </nav>
`

const mainView = (state, prev, send) => html`
	<div>
	  ${menu(state, prev, send)}
    <main>
      <h1>${state.currentPage.title}</h1>
      <img src="${state.currentPage.media}"/>
      <div>${state.currentPage.content}</div>           
    </main>
  </div>
`    

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

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