const wrapper = document.getElementById("container_wrapper");
const objects = document.querySelectorAll(".objects img");
const boxes = Array.from(document.querySelectorAll(".bottom-div div"));
const message = document.getElementById("message");
const parentDiv = document.getElementById("confettis");
const confettis = Array.from(document.querySelectorAll(".confetti"));
const zoomButton = document.getElementById("zoomButton");
let answersCounter = 0;

zoomButton.addEventListener("click", () => {
  if (zoomButton.dataset.zoom === "zoom out") {
    console.log("zoomed out");
    objects[answersCounter].style.width = "300px";
    zoomButton.dataset.zoom = "zoom in";
  } else {
    console.log("zoomed in");
    objects[answersCounter].style.width = "100px";
    zoomButton.dataset.zoom = "zoom out";
  }
});

function startGame() {
  if (answersCounter > 8) {
    return;
  }
  objects[answersCounter].style.display = "block";
  objects[answersCounter].style.zIndex = "1";
  objects[answersCounter].style.width = "100px";
}

objects.forEach((dragItem) => {
  dragItem.addEventListener("dragstart", dragStart);
  dragItem.addEventListener("touchstart", touchStart);
  dragItem.addEventListener("contextmenu", function (event) {
    event.preventDefault();
  });
  dragItem.style.zIndex = "0";
  dragItem.style.display = "none";
});
startGame(); //Run startGame() so the first item gets displayed

boxes.forEach((cell) => {
  cell.addEventListener("dragover", dragOver);
  cell.addEventListener("drop", drop);
  cell.addEventListener("touchmove", touchMove);
  cell.addEventListener("touchend", touchEnd);
});

function dragStart(event) {
  //event.dataTransfer.setData('text/plain', event.target.classList.value);
  event.dataTransfer.setData("text/html", event.target.outerHTML);
}

function touchStart(event) {
  const touch = event.targetTouches[0];
  event.target.dataset.touchX = touch.clientX;
  event.target.dataset.touchY = touch.clientY;
}

function touchMove(event) {
  const touch = event.targetTouches[0];
  const dx = touch.clientX - parseInt(event.target.dataset.touchX);
  const dy = touch.clientY - parseInt(event.target.dataset.touchY);
  event.target.style.left = dx + "px";
  event.target.style.top = dy + "px";
}

function touchEnd(event) {
  event.preventDefault();
  event.target.style.left = "0";
  event.target.style.top = "0";
}

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

function drop(event) {
  const data = event.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 imageValue = element.classList.value;
  const boxValue = event.target.innerText.split("-")[1];

  if (imageValue === boxValue) {
    /* event.target.innerText= '' */
    event.target.appendChild(element);
    const altValue = element.getAttribute("alt");
    answersCounter++;
    if (zoomButton.dataset.zoom == "zoom in") {
      zoomButton.dataset.zoom = "zoom out";
    } else {
      zoomButton.dataset.zoom == "zoom in";
    }
    objects.forEach((object) => {
      if (object.getAttribute("alt") === altValue) {
        object.remove();
      }
      //console.log("One added");
    });
    startGame();
  } else {
    wrapper.classList.add("shake");
    setTimeout(() => {
      wrapper.classList.remove("shake");
    }, 500);
  }

  if (answersCounter > 8) {
    wrapper.style.transition = "0.2s ease-in";
    wrapper.style.opacity = "0.2";
    message.style.transform = "scale(1.8)";
    parentDiv.style.zIndex = 10;
    confettis.forEach((confetti) => {
      confetti.style.display = "block";
    });
  }
}
