const dropdownBtn = document.querySelectorAll(".bizhub-dropdown-btn");
const dropdown = document.querySelectorAll(".bizhub-dropdown");
const hamburgerBtn = document.getElementById("bizhub-hamburger");
const navMenu = document.querySelector(".bizhub-menu");
const links = document.querySelectorAll(".bizhub-dropdown a");

function setAriaExpandedFalse() {
  dropdownBtn.forEach((btn) => btn.setAttribute("aria-expanded", "false"));
}

function closeDropdownMenu() {
  dropdown.forEach((drop) => {
    drop.classList.remove("bizhub-active");
    drop.addEventListener("click", (e) => e.stopPropagation());
  });
}

function toggleHamburger() {
  navMenu.classList.toggle("bizhub-show");
}

dropdownBtn.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    const dropdownIndex = e.currentTarget.dataset.dropdown;
    const dropdownElement = document.getElementById(dropdownIndex);

    dropdownElement.classList.toggle("bizhub-active");
    dropdown.forEach((drop) => {
      if (drop.id !== btn.dataset["dropdown"]) {
        drop.classList.remove("bizhub-active");
      }
    });
    e.stopPropagation();
    btn.setAttribute(
      "aria-expanded",
      btn.getAttribute("aria-expanded") === "false" ? "true" : "false"
    );
  });
});

// Close dropdown menu when the dropdown links are clicked
links.forEach((link) =>
  link.addEventListener("click", () => {
    closeDropdownMenu();
    setAriaExpandedFalse();
    toggleHamburger();
  })
);

// Close dropdown menu when you click on the document body
document.documentElement.addEventListener("click", () => {
  closeDropdownMenu();
  setAriaExpandedFalse();
});

// Close dropdown when the escape key is pressed
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    closeDropdownMenu();
    setAriaExpandedFalse();
  }
});

// Toggle hamburger menu
hamburgerBtn.addEventListener("click", toggleHamburger);

// SCROLL EVENT
window.addEventListener('scroll', function() {
  const nav = document.querySelector('.bizhub-nav');
  const tbHeight = document.querySelector('.bizhub-ctb-section').offsetHeight;
  
  // When the page scrolls past the height of the top bar
  if (window.scrollY > tbHeight) {
    nav.classList.add('bizhub-scrolled');
  } else {
    nav.classList.remove('bizhub-scrolled');
  }
});