export class Display {
  constructor(baseUrl, dispatch, target) {
    this.baseUrl = baseUrl
    this.target = target
    target.addEventListener('click', e => {
      let target = e.target
      while (target.nodeName !== 'A') {
        target = target.parentNode
        if (!target) return
      }
      window.history.pushState(null, "", target.href)
      dispatch(target.getAttribute('href'))
      e.preventDefault()
    })
  }
  render(state) {
    const target = document.createElement('div')
    target.className = 'wrapper'
    const field = document.createElement('ul')
    field.className = 'items'

    for (const item of state.items) {
      const dom = document.createElement('li')
      const a = document.createElement('a')
      const action = item.state == 'face-down' ? 'flip' : 'show'
      a.href = `/${item.id}/${action}`
      dom.className = item.state
      dom.appendChild(a)
      field.appendChild(dom)
    }
    target.appendChild(field)
    if (state.show !== null) {
      const wrapper = document.createElement('a')
      wrapper.href = '/'
      const fullview = document.createElement('div')
      wrapper.className = 'fullview'
      wrapper.appendChild(fullview)
      target.appendChild(wrapper)
    }

    const dd = new diffDOM.DiffDOM()
    const diff = dd.diff(this.target, target)
    dd.apply(this.target, diff)
  }
}