var dates = ['2026-15', '2026-14', '2026-13', '2026-12', '2026-11', '2026-10']

var parts = [
  'nieuwe namen',
  'nieuwe woorden',
  'personen',
  'locaties',
  'organisaties',
  'andere namen',
]

var sources = ['Algemeen', 'Groningen', 'Amsterdam', 'Literatuur', 'Vlaanderen']

var data = new Map()

function getJSON(url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest()
    xhr.open('get', url, true)
    xhr.responseType = 'json'
    xhr.onload = function () {
      var status = xhr.status
      if (status == 200) {
        resolve(xhr.response)
      } else {
        reject(status)
      }
    }
    xhr.send()
  })
}

async function getData(week) {
  /*
  if (data.has(week)) {
    return
  }
  */
  data[week] = await getJSON('DATA-' + week + '-4.json')
}

function escape(s) {
  return s
    .replace('&', '&')
    .replace("'", ''')
    .replace('<', '&lt')
    .replace('>', '&gt;')
}

function makeTD(title, values) {
  const td = document.createElement('td')
  const h3 = document.createElement('h3')
  const txt = document.createTextNode(title)
  h3.appendChild(txt)
  td.appendChild(h3)
  const tab = document.createElement('table')
  console.log(values)

  var max
  for (var i = 0; i < 20; i++) {
    var value
    if (i < values.length) {
      value = values[i]
    } else {
      value = [0, '\xa0', '']
    }
    if (i == 0) {
      max = value[0]
    }
    const tr = document.createElement('tr')
    if (i < values.length) {
      var t2 = ''
      if (value[2]) {
        tr.classList.add('tags')
        t2 = '<br><small>' + escape(value[2]) + '</small>'
      }
      tr.setAttribute(
        'onmouseover',
        "tooltip.show('" + value[0] + ' \xa0 ' + escape(value[1]) + t2 + "')",
      )
      tr.setAttribute('onmouseout', 'tooltip.hide()')
    }
    const td1 = document.createElement('td')
    const div1 = document.createElement('div')
    pc = (value[0] / max) * 100
    div1.style.width = pc + '%'
    td1.appendChild(div1)
    tr.appendChild(td1)
    const td2 = document.createElement('td')
    const txt2 = document.createTextNode(value[1])
    td2.appendChild(txt2)
    tr.appendChild(td2)
    tab.appendChild(tr)
  }

  td.appendChild(tab)
  return td
}

async function loadSource(source, week) {
  if (!data.has(week)) {
    data[week] = await getJSON('DATA-' + week + '-4.json')
  }

  document.getElementById('subtitle').innerHTML =
    source + ' — ' + data[week].year + ' week ' + data[week].week

  const d = document.createElement('div')
  const tab = document.createElement('table')
  tab.classList.add('outer')
  tr = document.createElement('tr')
  parts.forEach(function (part) {
    var values = data[week][source][part]
    tr.appendChild(makeTD(part, values))
  })
  tab.appendChild(tr)
  d.appendChild(tab)
  document.getElementById('data').innerHTML = d.innerHTML
}

async function loadPart(part, week) {
  if (!data.has(week)) {
    data[week] = await getJSON('DATA-' + week + '-4.json')
  }

  document.getElementById('subtitle').innerHTML =
    part + ' — ' + data[week].year + ' week ' + data[week].week

  const d = document.createElement('div')
  const tab = document.createElement('table')
  tab.classList.add('outer')
  tr = document.createElement('tr')
  sources.forEach(function (source) {
    var values = data[week][source][part]
    tr.appendChild(makeTD(source, values))
  })
  tab.appendChild(tr)
  d.appendChild(tab)
  document.getElementById('data').innerHTML = d.innerHTML
}

async function loadWeken(source, part) {
  document.getElementById('subtitle').innerHTML = source + ' — ' + part

  const d = document.createElement('div')
  const tab = document.createElement('table')
  tab.classList.add('outer')
  tr = document.createElement('tr')

  for (var i = 0; i < 6; i++) {
    if (i < dates.length) {
      var week = dates[i]
      if (!data.has(week)) {
        data[week] = await getJSON('DATA-' + week + '-4.json')
      }
      var values = data[week][source][part]
      tr.appendChild(
        makeTD(data[week].year + ' week ' + data[week].week, values),
      )
    }
  }

  tab.appendChild(tr)
  d.appendChild(tab)
  document.getElementById('data').innerHTML = d.innerHTML
}

function kies() {
  let source = document.forms['choice']['rSource'].value
  let part = document.forms['choice']['rPart'].value
  console.log(source)
  console.log(part)
  if ((source == 'alles' || source == '') && (part == 'alles' || part == '')) {
    alert('Kies een bron en/of een onderdeel')
  } else if (source == 'alles' || source == '') {
    loadPart(part, dates[0])
  } else if (part == 'alles' || part == '') {
    loadSource(source, dates[0])
  } else {
    loadWeken(source, part)
  }
}

loadSource('Algemeen', dates[0])