/**
 * scroll triggers
 */
gsap.from(".navbar", { autoAlpha: 0, ease: "linear", duration: 0.1 });
gsap.from(".nav-flex-wrapper", { yPercent: 30, duration: 0.3 });

var logoCollapseHeight = window.innerHeight * 0.8;
const logoAnimation = gsap.timeline({
  scrollTrigger: {
    trigger: "body",
    pin: false,
    start: "top top",
    end: `${logoCollapseHeight} top`,
    scrub: 1,
    anticipatePin: 1,
    onLeave: logoCollapse,
    onEnterBack: logoExpand,
  },
});

// Menu toggle click
document.querySelectorAll(".menu-button").forEach((el) => {
  el.addEventListener("click", navToggle);
});

// Nav menu link click
document.querySelectorAll(".nav-menu a").forEach((el) => {
  el.addEventListener("click", navToggle);
});

// Toggle menu if any nav container has .w--open
document.addEventListener("click", function (e) {
  const navContainer = document.getElementById("nav-container");
  if (!navContainer) return;
  if (navContainer.querySelector(".w--open")) {
    navToggle();
  }
});

// Escape key closes nav
window.addEventListener("keyup", function (e) {
  if (e.key === "Escape" || e.key === "Esc") {
    navToggle();
  }
});

/**
 * Logo toggle class dark or light
 */
function logoLight() {
  document
    .querySelectorAll(".menu-button-icon-line, .nav-logo")
    .forEach((el) => {
      el.classList.add("white");
    });
  toggleLogoBg();
}

function logoDark() {
  document
    .querySelectorAll(".menu-button-icon-line, .nav-logo")
    .forEach((el) => {
      el.classList.remove("white");
    });
  toggleLogoBg();
}

function logoCollapse() {
  document.querySelector(".nav-logo")?.classList.add("collapsed");

  document.querySelectorAll(".gatecrasher .hide").forEach((el, i) => {
    const dist = -150 * i;
    gsap.to(el, { autoAlpha: 0, xPercent: dist, duration: 0.4 });
  });

  gsap.to(".gatecrasher #letter-c", { xPercent: -320, duration: 0.4 }, "<");

  const isDesktop = window.innerWidth > 991;
  gsap.to(
    ".nav-logo",
    { scale: isDesktop ? 1.2 : 1, xPercent: isDesktop ? 5 : 0 },
    "<"
  );

  toggleLogoBg();
}

function toggleLogoBg() {
  const navLogo = document.querySelector(".nav-logo");
  const logoBg = document.querySelector(".nav-logo-background");

  if (!navLogo || !logoBg) return;

  const isWhite = navLogo.classList.contains("white");
  const isCollapsed = navLogo.classList.contains("collapsed");

  if (!isWhite && isCollapsed) {
    gsap.to(logoBg, { opacity: 1 }, "<");
  } else {
    gsap.to(logoBg, { opacity: 0 }, "<");
  }
}

function logoExpand() {
  const navLogo = document.querySelector(".nav-logo");
  if (navLogo) navLogo.classList.remove("collapsed");

  gsap.to(".nav-logo", { scale: 1, xPercent: 0 });

  gsap.to(
    ".gatecrasher .hide",
    {
      autoAlpha: 1,
      xPercent: 0,
      duration: 0.4,
    },
    "<"
  );

  gsap.to(".gatecrasher #letter-c", { xPercent: 0, duration: 0.4 }, "<");

  toggleLogoBg();
}

function navToggle() {
  setTimeout(() => {
    const menuBtn = document.querySelector(".menu-button");
    const iconLines = document.querySelectorAll(".menu-button-icon-line");
    const html = document.documentElement;

    if (menuBtn && menuBtn.classList.contains("w--open")) {
      iconLines.forEach((el) => el.classList.add("is-active"));

      html.classList.add("w-lightbox-noscroll");
    } else {
      iconLines.forEach((el) => el.classList.remove("is-active"));

      html.classList.remove("w-lightbox-noscroll");
    }
  }, 10);
}