const goalKeeperContainer = document.querySelector(".goalkeeper");
const goalKeeperContainer2 = document.querySelector(".goalkeeper2");
const arrowContainer = document.querySelector(".arrow");
const ballContainer = document.querySelector(".ball");
const guyContainer = document.querySelector(".guy");
const guyContainer2 = document.querySelector(".guy2");
const screenWidth = window.innerWidth;
const minReleaseX = screenWidth * 0.2;
const maxReleaseX = screenWidth * 0.8;

let attempt = 1;
let modalOpen = false; // Flag to check if modal is open

// Attach event listener to the "Try Again" button
document.getElementById("try_again").addEventListener("click", (event) => {
  event.stopPropagation(); // Prevent the click event from propagating

  document.getElementById("fail_modal").style.display = "none";

  // Ensure the backdrop is removed
  document
    .querySelectorAll(".modal-backdrop")
    .forEach((backdrop) => backdrop.remove());

  guyContainer2.style.display = "none";
  guyContainer.style.display = "block";
  guyContainer.style.left = "36%";

  arrowContainer.style.display = "block";
  arrowContainer.style.left = "50%";

  ballContainer.style.transition = "none";
  ballContainer.style.transform = "none";
  ballContainer.style.display = "block";
  ballContainer.style.left = "50%";
  ballContainer.style.transform = `translateX(-50%)`;

  goalKeeperContainer2.style.display = "none";
  goalKeeperContainer.style.display = "block";
  goalKeeperContainer.style.left = "50%";

  modalOpen = false; // Reset the flag when the modal is closed
});

const moveElements = (event) => {
  if (modalOpen) return; // Prevent movement when modal is open

  let x = event.clientX || event.touches[0].clientX;
  x = Math.max(0.15 * screenWidth, Math.min(x, screenWidth * 0.8)); // Ensure x stays within the screen

  const xPercent = (x / screenWidth) * 100;

  ballContainer.style.left = `50%`;
  guyContainer.style.left = `${xPercent}%`;
  arrowContainer.style.left = `${xPercent + 3.5}%`;
};

const placeGoalkeeper = (event) => {
  if (modalOpen) return; // Prevent action when modal is open

  let releaseX =
    event.clientX || (event.changedTouches && event.changedTouches[0].clientX);
  if (releaseX === undefined) return;

  releaseX = Math.max(minReleaseX, Math.min(maxReleaseX, releaseX));
  const releaseXPercent = (releaseX / screenWidth) * 100;

  goalKeeperContainer.style.transition = "left 0.3s ease";

  if (attempt === 1) {
    goalKeeperContainer.style.left = `${releaseXPercent}%`;
  } else {
    let randomX;
    do {
      randomX =
        Math.floor(
          Math.random() * (0.8 * screenWidth - 0.2 * screenWidth + 1),
        ) +
        0.2 * screenWidth;
    } while (Math.abs(randomX - releaseX) < 100);
    const randomXPercent = (randomX / screenWidth) * 100;
    goalKeeperContainer.style.left = `${randomXPercent}%`;
  }
};

const flyOutBall = (event) => {
  if (modalOpen) return; // Prevent action when modal is open

  let releaseX =
    event.clientX || (event.changedTouches && event.changedTouches[0].clientX);
  const initialBallY = window.innerHeight * 0.7;
  const targetBallY = window.innerHeight * 0.6;

  releaseX = Math.max(minReleaseX, Math.min(maxReleaseX, releaseX));
  console.log(releaseX);

  let deltaX = releaseX - screenWidth * 0.5;
  if (releaseX > screenWidth * 0.5) deltaX = releaseX - screenWidth * 0.7;
  const deltaYBall = targetBallY - initialBallY;

  const distance = Math.sqrt(deltaX * deltaX + deltaYBall * deltaYBall);
  const duration = distance / 500; // Adjust this factor to control the speed of the fly-out

  if (attempt === 1) {
    guyContainer.style.display = "none";
    guyContainer2.style.left = `${(releaseX / window.innerWidth) * 100}%`;
    guyContainer2.style.display = "block";

    arrowContainer.style.display = "none";

    ballContainer.style.transition = `transform ${duration}s ease`;
    ballContainer.style.transform = `translate(${deltaX * 1.5}px, ${deltaYBall * 2}px)`;

    goalKeeperContainer.style.display = "none";
    goalKeeperContainer2.style.left = `${(releaseX / window.innerWidth) * 100}%`;
    goalKeeperContainer2.style.display = "block";

    setTimeout(() => {
      showModalFail();
    }, 500);
    attempt++;
  } else {
    console.log(deltaX);
    guyContainer.style.display = "none";
    guyContainer2.style.left = `${(releaseX / window.innerWidth) * 100}%`;
    guyContainer2.style.display = "block";

    arrowContainer.style.display = "none";

    ballContainer.style.transition = `transform ${duration}s ease`;
    ballContainer.style.transform = `translate(${deltaX * 1.5}px, ${deltaYBall * 2}px)`;

    setTimeout(() => {
      showModalSuccess();
    }, 500);
  }
};

const showModalFail = () => {
  const attemptModal = new bootstrap.Modal(
    document.getElementById("fail_modal"),
  );
  attemptModal.show();
  modalOpen = true; // Set the flag when the modal is open
};

const showModalSuccess = () => {
  const attemptModal = new bootstrap.Modal(
    document.getElementById("success_modal"),
  );
  attemptModal.show();
  modalOpen = true; // Set the flag when the modal is open
};

document.addEventListener("mousemove", moveElements);
document.addEventListener("touchmove", moveElements);
document.addEventListener("mouseup", (event) => {
  placeGoalkeeper(event);
  flyOutBall(event);
});
document.addEventListener("touchend", (event) => {
  placeGoalkeeper(event);
  flyOutBall(event);
});
