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

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

  const socket = new WebSocket('ws://127.0.0.1:4009')

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

  document.getElementById('items-btn').addEventListener('click', () => {
    socket.send(JSON.stringify({
      action: 'list',
      site: site.value,
      url: urlField.value,
    }))
  })

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

  socket.addEventListener('message', ev => {
    const msg = JSON.parse(ev.data)
    switch (msg.type) {
      case 'items':
        itemsDiv.textContent = '' // clear
        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 'dl_progress':
        break
      case 'dl_end':
        break
    }
  })
})