import {Display} from './display.js'

const target = document.createElement('div')

const state = {items: [], show: null }
for (let i = 0; i < 16; ++i) {
  state.items.push({id: i, state: 'face-down', img: 'weben.svg'})
}

class Actions {
  flip(id) {
    state.items[id].state = 'face-up'
  }
  show(id) {
    state.show = id
  }
  reset() {
    state.show = null
  }
}
const actions = new Actions

let display
const dispatch = target => {
  const match = target.match(/\/([^/]+)\/([^/]+)/)
  if (match && Object.hasOwnProperty.call(Actions.prototype, match[2])) {
    actions[match[2]](match[1])
  } else actions.reset()
  display.render(state)
}
window.onpopstate = e => {
  dispatch(document.location.search)
}
display = new Display('', dispatch, target)

dispatch(document.location.search)
document.body.appendChild(target)