const html = require('choo/html')
const _ = require('lodash')

module.exports = view

function view (state, emit) {
  return html`
    <ul id='zine-shelves'>
    ${state.library.map(listZines)}
    </ul>
    `

  function listZines (zine) {
    var collection = state.params.collection
// This could likely be muuuch prettier, need to refactor!
    var isPartOfCollection = () => {
      if (zine.collections) {
        var name = decodeURI(collection)
        return zine.collections.find(collection => _.toLower(collection) === name)
      } else return false
    }
    if (collection && !isPartOfCollection()) {
      return //nothing
    } else {
    var trimmedUrl = _.trimEnd(zine.url, '/')
    var zineID = zine.title.replace(/ /g, '-')
    var imagePath = state.covers[trimmedUrl]
    return html`
      <li id=${zineID}>
      <a href=${zine.url} title=${zine.title} target="_blank">
      <div class='zine-card'>
      <div class='title'>
      <h1>${zine.title}</h1>
      </div>
      <div class='details'>
      <img src=${imagePath}/>
      <p>${zine.notes}</p>
      ${renderInfo(zine, state)}
      </div>
      </div>
      </a>
      </li>
      `
    }
  }

  function renderInfo (zine, state) {
    var trimmedUrl = _.trimEnd(zine.url, '/')
    var info = _.entries(state.info[trimmedUrl])
    if (info) {
      return html`
      <div id='zine-info'>
      <h1>Info From Zine</h1>
	${info.map(pair => {
	return html`<p><strong>${pair[0]}:</strong> ${pair[1]}</p>`
	})
	}
      </div>
      `

    }
  }
}