const baseTmpl = '<li><a href="{{link}}" rel="noopener" target="_blank"><p>{{text}}</p><time datetime="{{datetime}}">{{time}}</time></a></li>'
const templates = {
  events: baseTmpl.replace('</time>', '</time><strong class="event-{{type}} bg-color-lightblack">{{type}}</strong>'),
  reading: baseTmpl,
  tweets: baseTmpl
}

function fetchData (item) {
  return window.fetch('//api.asciidisco.com/' + item + '.json').then(function __serializeJSON (res) {
    return res.json()
  }).catch(showError.bind(null, item))
}

function createFragment (data, renderMarkup) {
  const fragment = document.createDocumentFragment()
  data.forEach(function __appendMarkupToDocfrag (item) {
    let containerElement = document.createElement('i')
    containerElement.insertAdjacentHTML('afterbegin', renderMarkup(item))
    fragment.appendChild(containerElement.firstElementChild)
  })
  return fragment
}

function getMarkup (template, item) {
  Object.keys(item).forEach(function __replacePlaceholderInTemplate (key) {
    template = template.replace(new RegExp('{{' + key + '}}', 'g'), item[key])
  })
  return template
}

function insert (selector, markupFn, data) {
  window.fastdom.mutate(function () {
    document.querySelector('#' + selector + ' ol').appendChild(createFragment(data, markupFn))
  })
}

function showError (selector, error) {
  console.error(error)
  document.querySelector('#' + selector).classList.add('error')
}

const sidebar = function () {
  Object.keys(templates).forEach(function __initSidebar (item) {
    fetchData(item).then(insert.bind(null, item, getMarkup.bind(null, templates[item]))).catch(showError.bind(null, item))
  })
};

(function __init () {
  sidebar()
}())