// https://codepen.io/crouchingtigerhiddenadam/pen/qKXgap
let selected = null;
let container = document.getElementById("topics-container")

function isBefore(el1, el2) {
  let cur
  if (el2.parentNode === el1.parentNode) {
    for (cur = el1.previousSibling; cur; cur = cur.previousSibling) {
      if (cur === el2) return true
    }
  }
  return false;
}

function dragOver(e) {
  let target = e.target.closest(".draggable-topic")
  
  if (!target || target === selected) {
    return;
  }
  
  if (isBefore(selected, target)) {
    container.insertBefore(selected, target)
  } else {
    container.insertBefore(selected, target.nextSibling)
  }
}

function dragEnd() {
  if (!selected) return;
  
  selected.classList.remove("dragged")
  selected = null;
  for (let i = 0; i < container.childElementCount - 1; i++) {
    let input = container.children[i].querySelector(".topic-input");
    input.value = i + 1;
  }
}

function dragStart(e) {
  e.dataTransfer.effectAllowed = 'move'
  e.dataTransfer.setData('text/plain', null)
  selected = e.target
  selected.classList.add("dragged")
}