const fuzzy = require('fuzzy')
const getUsers = require('./getUsers')
const getURLOfUser = require('./getURLOfUser')
const searchNode = document.querySelector('#search')
const inputNode = searchNode.querySelector('input[type="text"]')
const autocompleteNode = document.querySelector('.autocomplete')
const scheduleIframe = document.querySelector('#schedule')

let selectedResult = -1
let results
let matches

getUsers().then(function (users) {
  // console.log(users)

  searchNode.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      e.preventDefault()

      if (document.querySelector('.selected')) document.querySelector('.selected').classList.remove('selected')

      const change = e.key === 'ArrowDown' ? 1 : -1
      selectedResult += change
      if (selectedResult < -1) selectedResult = matches.length - 1
      else if (selectedResult > matches.length - 1) selectedResult = -1

      if (selectedResult !== -1) autocompleteNode.children[selectedResult].classList.add('selected')
    }
  })

  searchNode.addEventListener('keyup', function (e) {
    // console.log(e)
    if (!(e.key === 'Enter' || e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
      autocompleteNode.innerHTML = ''
      if (inputNode.value.trim() === '') return

      selectedResult = -1
      results = fuzzy.filter(inputNode.value, users, {
        pre: '<strong>',
        post: '</strong>',
        extract: function (el) { return el.value }
      }).slice(0, 7)
      matches = results.map(function (el) { return el.string })

      matches.forEach(function (match) {
        const resultNode = document.createElement('li')
        resultNode.innerHTML = match
        autocompleteNode.appendChild(resultNode)
      })
    }
  })

  searchNode.addEventListener('submit', submitForm)

  function submitForm (e) {
    e.preventDefault()
    const indexInResult = selectedResult === -1 ? 0 : selectedResult
    const selectedUser = users[results[indexInResult].index]

    inputNode.value = selectedUser.value
    autocompleteNode.innerHTML = ''

    inputNode.blur()

    scheduleIframe.src = getURLOfUser(0, selectedUser.type, selectedUser.index + 1)
  }

  autocompleteNode.addEventListener('click', function (e) {
    if (e.target.tagName === 'LI' && e.target.parentElement === autocompleteNode) {
      selectedResult = Array.prototype.indexOf.call(e.target.parentElement.childNodes, e.target)
      submitForm({preventDefault: function () {}}) // HACK: this is horrible.
    }
  })
})

inputNode.addEventListener('click', function () {
  inputNode.select()
})

inputNode.addEventListener('blur', function () {
  inputNode.selectionStart = inputNode.selectionEnd = -1
})