window.addEventListener("DOMContentLoaded", () => {
  const images = Array.from(document.querySelectorAll("#drag-items img"));
  const container = document.getElementById("container_wrapper");
  const dragItems = document.getElementById("drag-items");
  const dropzone = document.getElementById("dropzone");
  let answers = ["Φορεσιά Αμαλίας - Κάτω", "Φορεσιά Αμαλίας - Κεφάλι"];
  const percentages = [];
  let successMsg = document.getElementById("success-message");
  successMsg.style.opacity = 0;

  //mobile DataTransfer
  let elementAppended = null;

  window.addEventListener("resize", () => {
    console.log(window.innerWidth);
  });
  images.forEach((image) => {
    percentages.push(image.offsetWidth / container.offsetWidth);
    image.addEventListener("dragstart", dragStart);
    image.addEventListener("touchstart", touchStart);
    image.addEventListener("contextmenu", function (event) {
      event.preventDefault();
    });
  });

  dropzone.addEventListener("dragover", dragOver);
  dropzone.addEventListener("drop", drop);

  function dragStart(e) {
    e.dataTransfer.setData("text/html", e.target.outerHTML);
    /* elementAppended = e.target.outerHTML; */
  }

  function touchStart(e) {
    e.preventDefault();
    const touch = e.targetTouches[0];
    const dragImage = e.target;
    dragImage.style.position = "absolute";
    dragImage.style.width = `${dragImage.offsetWidth}px`;
    dragImage.style.zIndex = 1000;
    const initialLeft = dragImage.offsetLeft;
    document.body.append(dragImage);

    moveAt(touch.pageX, touch.pageY);

    function moveAt(pageX, pageY) {
      dragImage.style.left = pageX - dragImage.offsetWidth / 2 + "px";
      dragImage.style.top = pageY - dragImage.offsetHeight / 2 + "px";
    }

    function onTouchMove(e) {
      const touch = e.targetTouches[0];
      moveAt(touch.pageX, touch.pageY);
    }

    document.addEventListener("touchmove", onTouchMove);

    dragImage.ontouchend = function () {
      console.log("Touch ended.");
      document.removeEventListener("touchmove", onTouchMove);
      dragImage.style.position = "absolute";
      const dropZoneRect = dropzone.getBoundingClientRect();
      const dragImageRect = dragImage.getBoundingClientRect();

      if (
        dragImageRect.left >= dropZoneRect.left &&
        dragImageRect.right <= dropZoneRect.right &&
        dragImageRect.top >= dropZoneRect.top &&
        dragImageRect.bottom <= dropZoneRect.bottom
      ) {
        const name = dragImage.getAttribute("alt");
        if (answers.includes(name)) {
          /* Not sure if this is the best way, i did this because  */
          let tempDiv = document.createElement("div");
          tempDiv = e.target.cloneNode(true);
          dropzone.appendChild(tempDiv);
          tempDiv.style.pointerEvents = "none";
          tempDiv.style.position = "";
          tempDiv.style.top = "";
          tempDiv.style.left = "";
          tempDiv.style.width = "";
          tempDiv.style.zIndex = "";
          dragImage.style.pointerEvents = "none";
          dragImage.style.position = "";
          dragImage.style.top = "";
          dragImage.style.left = "";
          dragImage.style.width = "";
          dragImage.style.zIndex = "";

          dragItems.append(dragImage);
          rightAnswers++;
          changeSelections();
        } else {
          dragItems.classList.add("shake");
          setTimeout(() => {
            dragItems.classList.remove("shake");
          }, 500);
          dragItems.appendChild(dragImage);
          dragImage.style.position = "initial";
        }
      } else {
        dragItems.classList.add("shake");
        setTimeout(() => {
          dragItems.classList.remove("shake");
        }, 500);
        dragItems.appendChild(dragImage);
        dragImage.style.position = "initial";
      }
    };
  }

  function dragOver(e) {
    e.preventDefault();
  }

  let rightAnswers = 0;
  function changeSelections() {
    let lowerParts = $("#drag-items").find(".lower-part");
    let heads = $("#drag-items").find(".head");
    let amalia = $("#dropzone").find("#amalia");
    let idra = $("#dropzone").find("#idra");
    let peloponnisos = $("#dropzone").find("#peloponnisos");
    let zagoroxoria = $("#dropzone").find("#zagoroxoria");

    if (rightAnswers == 1) {
      lowerParts.css("display", "none");
      heads.css("display", "");
    } else if (rightAnswers == 2) {
      successMsg.textContent = "Φορεσιά Αμαλίας 1850";
      successMsg.style.opacity = "1";
      setTimeout(() => {
        //Remove head & lower parts from drop-zone element
        $("#dropzone").find("#amalia-lower").remove();
        $("#dropzone").find("#amalia-head").remove();

        heads.css("display", "none"); //Hide all heads
        lowerParts.css("display", "none"); //Hide all lowerParts

        amalia.css("display", "none");
        idra.css("display", "");
        lowerParts.css("display", "");

        //Repopulate answers array
        answers = ["Φορεσιά Ύδρας - Κάτω", "Φορεσιά Ύδρας - Κεφάλι"];
        successMsg.style.opacity = "0";
      }, 3000);
    } else if (rightAnswers == 3) {
      successMsg.textContent = "";
      lowerParts.css("display", "none");
      heads.css("display", "");
    } else if (rightAnswers == 4) {
      successMsg.textContent = "Ανδρική φορεσιά Ύδρας 19ος αιώνας";
      successMsg.style.opacity = "1";
      setTimeout(() => {
        $("#dropzone").find("#idras-lower").remove();
        $("#dropzone").find("#idras-head").remove();
        heads.css("display", "none"); //Hide all heads
        lowerParts.css("display", "none"); //Hide all lowerParts
        idra.css("display", "none");
        peloponnisos.css("display", "");
        lowerParts.css("display", "");

        //Repopulate answers array
        answers = [
          "Φορεσιά Πελοποννήσου - Κάτω",
          "Φορεσιά Πελοποννήσου - Κεφάλι",
        ];
        successMsg.style.opacity = "0";
      }, 3000);
    } else if (rightAnswers == 5) {
      successMsg.textContent = "";
      lowerParts.css("display", "none");
      heads.css("display", "");
    } else if (rightAnswers == 6) {
      successMsg.textContent = "Ανδρική φορεσιά Πελοποννήσου 19ος αιώνας";
      successMsg.style.opacity = "1";
      setTimeout(() => {
        $("#dropzone").find("#peloponnisou-lower").remove();
        $("#dropzone").find("#peloponnisou-head").remove();
        heads.css("display", "none"); //Hide all heads
        lowerParts.css("display", "none"); //Hide all lowerParts
        peloponnisos.css("display", "none");
        zagoroxoria.css("display", "");
        lowerParts.css("display", "");

        //Repopulate answers array
        answers = [
          "Φορεσιά Ζαγοροχώρια - Κάτω",
          "Φορεσιά Ζαγοροχώρια - Κεφάλι",
        ];
        successMsg.style.opacity = "0";
      }, 3000);
    } else if (rightAnswers == 7) {
      successMsg.textContent = "";
      lowerParts.css("display", "none");
      heads.css("display", "");
    } else if (rightAnswers == 8) {
      successMsg.textContent = "Νυφική φορεσιά από τα Ζαγοροχώρια 19ος αιώνας";
      successMsg.style.opacity = "1";
      setTimeout(() => {
        successMsg.textContent = "";
        dragItems.style.opacity = "0";
        dropzone.style.opacity = "0";
        container.append(successMsg);
        successMsg.textContent = "Ολοκλήρωσες την άσκηση. Μπράβο!";
        successMsg.style.opacity = "1";
        setTimeout(() => {
          dragItems.style.display = "none";
          dropzone.style.display = "none";
        }, 1000);
      }, 3000);
    }
  }

  function drop(e) {
    e.preventDefault();
    const data = e.dataTransfer.getData("text/html");
    const tempElement = document.createElement("div");
    tempElement.innerHTML = data;
    const element = tempElement.firstChild; // This gets the first child, assuming there's only one element in the HTML string
    const name = element.getAttribute("alt");
    if (answers.includes(name)) {
      dropzone.appendChild(element);
      element.style.pointerEvents = "none";
      /* const image = images.find((img) => img.getAttribute("alt") === name); */
      rightAnswers++;
      changeSelections();
    } else {
      dragItems.classList.add("shake");
      setTimeout(() => {
        dragItems.classList.remove("shake");
      }, 500);
    }
  }
});
