let removedCollections = [];

document.getElementById("add-collection-button").addEventListener("click", () => {
  const container = document.getElementById("collections-container");
  const currentCount = container.querySelectorAll(".draggable-collection").length;

  const newId = `new-${Date.now()}`
  const collectionHtml = `
    <div class="draggable-collection"
         data-collection-id="${newId}"
         draggable="true"
         ondragover="dragOver(event)"
         ondragstart="dragStart(event)"
         ondragend="dragEnd()">
      <input type="text" class="collection-name" value="" required placeholder="Enter collection name" autocomplete="off" maxlength="60"><br>
      <div>0 threads, 0 posts</div>
      <button type="button" class="delete-button critical">Delete</button>
    </div>
  `;
  container.insertAdjacentHTML('beforeend', collectionHtml);
})

document.addEventListener("click", e => {
  if (!e.target.classList.contains("delete-button")) {
    return;
  }
  const collectionDiv = e.target.closest(".draggable-collection");
  const collectionId = collectionDiv.dataset.collectionId;

  if (!collectionId.startsWith("new-")) {
    removedCollections.push(collectionId);
  }

  collectionDiv.remove();
})

document.getElementById("save-button").addEventListener("click", async () => {
  const collections = [];
  const collectionDivs = document.querySelectorAll(".draggable-collection");
  let isValid = true;
  collectionDivs.forEach((collection, index) => {
    const collectionId = collection.dataset.collectionId;
    const nameInput = collection.querySelector(".collection-name");

    if (!nameInput.reportValidity()) {
      isValid = false;
      return;
    }

    collections.push({
      id: collectionId,
      name: nameInput.value,
      is_new: collectionId.startsWith("new-"),
    });
  })

  if (!isValid) {
    return;
  }

  const data = {
    collections: collections,
    removed_collections: removedCollections,
  };

  try {
    const saveHref = document.getElementById('save-button').dataset.submitHref;
    const response = await fetch(saveHref, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

    if (response.ok) {
      window.location.reload();
    } else {
      console.error("Error saving collections");
    }

  } catch (error) {
    console.error("Error saving collections: ", error);
  }
})

// drag logic
// https://codepen.io/crouchingtigerhiddenadam/pen/qKXgap

let selected = null;
const container = document.getElementById("collections-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-collection")

  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;
}

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