"use strict";

document.addEventListener("DOMContentLoaded", function () {
  const ball = document.getElementById("ball");
  if (!ball) return;

  // inject cursor:none rule for the special class
  const style = document.createElement("style");
  style.textContent = `
    .theme-use-global-link,
    a.theme-use-global-link,
    .theme-use-global-link *,
    .theme-use-global-link a,
    .theme-use-global-link button {
      cursor: none !important;
    }
  `;
  document.head.appendChild(style);

  let scale = 1;
  let isHidden = false;

  document.addEventListener("mousemove", function (e) {
    ball.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%) scale(${scale})`;
  });

  function hideBall() {
    if (isHidden) return;
    isHidden = true;
    ball.classList.add("hidden");
  }
  function showBall() {
    if (!isHidden) return;
    isHidden = false;
    ball.classList.remove("hidden");
  }

  // Hide when mouse leaves window
  // fade out when mouse leaves window
  document.addEventListener("mouseleave", function () {
    ball.classList.add("hidden");
  });
  document.addEventListener("mouseenter", function () {
    ball.classList.remove("hidden");
  });

  // Default hover targets, exclude those inside
  const hoverTargetsDefault = Array.from(document.querySelectorAll("a, button"))
    .filter(el => !el.closest(".cursor-text"));

  const hoverTargetsText = document.querySelectorAll(".theme-use-global-link");

  hoverTargetsDefault.forEach(el => {
    el.addEventListener("mouseenter", () => {
      scale = 1.5;
      ball.innerHTML = "";
      ball.style.backgroundColor = "var(--theme-color-primary)";
      ball.style.border = "1px solid var(--theme-color-primary)";
    });
    el.addEventListener("mouseleave", () => {
      scale = 1;
      ball.innerHTML = "";
      ball.style.backgroundColor = "var(--theme-color-transparent)";
      ball.style.border = "1px solid var(--theme-color-primary)";
    });
  });

  hoverTargetsText.forEach(el => {
    el.addEventListener("mouseenter", () => {
      scale = 1;
      ball.innerHTML = `<div class="wtoolkit-mc-text-wrapper"><span class="wtoolkit-mc-text theme-accent-text theme-color-white">Detail</span></div>`;
      ball.style.backgroundColor = "var(--theme-color-transparent)";
      ball.style.border = "none";
    });
    el.addEventListener("mouseleave", () => {
      scale = 1;
      ball.innerHTML = "";
      ball.style.backgroundColor = "var(--theme-color-transparent)";
      ball.style.border = "1px solid var(--theme-color-primary)";
    });
  });
});
