// pre vars
let mousePosition = {
  x: 0,
  y: 0
};
window.addEventListener("mousemove", (event) => {
  mousePosition = {
      x: event.clientX,
      y: event.clientY
  }
});

// functions
function smoothScrollToElement(elementId, duration = 500) {
  const element = document.getElementById(elementId);
  
  const start = window.pageYOffset;
  const end = element.offsetTop;
  const startTime = performance.now();

  function scrollStep(timestamp) {
    const progress = Math.min(1, (timestamp - startTime) / duration);
    const easing = easeInOutQuad(progress);
    window.scrollTo(0, start + (end - start) * easing);

    if (progress < 1) {
      requestAnimationFrame(scrollStep);
    }
  }

  function easeInOutQuad(t) {
    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
  }

  requestAnimationFrame(scrollStep);
}
function rippleEffect(button, color = "rgb(200, 200, 200)", duration = 1) {
  const ripple = document.createElement("div");
  ripple.style.position = "absolute";
  ripple.style.borderRadius = "50%";
  ripple.style.backgroundColor = color;
  ripple.style.opacity = "0.6";
  ripple.style.transform = "scale(0)";
  ripple.style.transition = `transform ${duration}s ease-out, opacity ${duration}s ease-out`;
  ripple.style.pointerEvents = "none"; // So that the ripple doesn't block clicks on the button
  ripple.style.zIndex = "0";

  
  button.appendChild(ripple);

  const rect = button.getBoundingClientRect();
  const rippleSize = Math.max(rect.width, rect.height) * 2;
  
  const clickedMousePosition = {
      x: mousePosition.x - rect.left,
      y: mousePosition.y - rect.top
  };

  const rippleLeft = clickedMousePosition.x - rippleSize / 2;
  const rippleTop = clickedMousePosition.y - rippleSize / 2;

  ripple.style.left = rippleLeft + "px";
  ripple.style.top = rippleTop + "px";
  ripple.style.width = rippleSize + "px";
  ripple.style.height = rippleSize + "px";

  ripple.style.transform = "scale(1)";
  ripple.style.opacity = "0";

  setTimeout(() => {
      ripple.remove();
  }, duration * 1000);
}
function toDiscord() {
  console.log("Redirecting..")
  window.location.href = "https://discord.bloxburger.eu/";
}

// event
document.addEventListener("DOMContentLoaded", async () => {
  // defining buttons
  const buttons = {
    login: document.getElementById("login-button")
  };

  // add ripple effects
  buttons.login.addEventListener("click", async () => {
    rippleEffect(buttons.login);
  });
});