addEventListener('DOMContentLoaded', () => {
  /** @type{HTMLInputElement} */
  const urlField = document.getElementById('url')
  /** @type{HTMLSelectElement} */
  const site = document.getElementById('site-select')
  /** @type{HTMLInputElement} */
  const proxyFlag = document.getElementById('proxy-cb')

  document.getElementById('guess-site-btn').addEventListener('click', () => {
    const url = urlField.value
    if (url.includes('/watch?v=') || url.includes('/playlist?list=')) {
      site.value = 'youtube'
    } else if (url.includes('soundcloud.com/')) {
      site.value = 'soundcloud'
    } else if (url.includes('://music.yandex.')) {
      site.value = 'yandex'
    }
  })

  const socket = new WebSocket('/ws')

  const itemsDiv = document.getElementById('items-container')
  let items = []

  const logField = document.getElementById('log')

  document.getElementById('items-btn').addEventListener('click', () => {
    socket.send(JSON.stringify({
      action: 'list',
      site: site.value,
      url: urlField.value,
      proxy: proxyFlag.checked,
    }))
    logField.textContent = '' // clear
  })

  document.getElementById('dl-btn').addEventListener('click', () => {
    socket.send(JSON.stringify({
      action: 'download',
      site: site.value,
      url: urlField.value,
      proxy: proxyFlag.checked,
      items: items,
    }))
    items = []
    logField.textContent = ''
  })

  socket.addEventListener('message', ev => {
    const msg = JSON.parse(ev.data)
    switch (msg.type) {
      case 'items':
        itemsDiv.textContent = ''
        const len = msg.data.length
        for (let i = 1; i <= len; i++) {
          const itemElem = document.createElement('label')
          const itemCheckbox = document.createElement('input')
          itemCheckbox.type = 'checkbox'
          itemCheckbox.addEventListener('change', () => {
            if (itemCheckbox.checked) {
              items.push(i)
            } else {
              items.splice(items.indexOf(i), 1)
            }
          })
          itemElem.append(itemCheckbox)
          itemText = document.createTextNode(msg.data[i - 1])
          itemElem.append(itemText)
          itemsDiv.append(itemElem)
        }
        break
      case 'ydl_log':
        const lineElem = document.createElement('span')
        switch (msg.level) {
          case 'warning':
            lineElem.className = 'log-warning'
            break
          case 'error':
            lineElem.className = 'log-error'
            break
          default: // add no classes if `debug` or some unknown level
            break
        }
        lineElem.innerText = msg.data + '\n'
        logField.append(lineElem)
        break
      case 'ydl_end':
        break
    }
  })
})