const singleNum = document.querySelectorAll(".product-numbers__single-num");
const productTab = document.querySelectorAll(".product-tabs__single-title");
const productFaq = document.querySelectorAll(".faq__single");
const dropdownMenu = document.querySelectorAll(".site-header__dropdown");

// Product single numbers
export const initSingleNumHover = () => {
  if (!singleNum) {
    return;
  }

  singleNum.forEach((num) => {
    var tooltip = num.querySelector(".product-numbers__tooltip");

    num.addEventListener("mouseover", () => {
      tooltip.classList.add("product-numbers__tooltip--visible");
    });

    num.addEventListener("mouseleave", () => {
      tooltip.classList.remove("product-numbers__tooltip--visible");
    });
  });
};

// Product tabs
export const initProductTabs = () => {
  if (!productTab) {
    return;
  }

  productTab.forEach((tab) => {
    tab.addEventListener("click", () => {
      const index = tab.getAttribute("data-tab-num");
      const activeTab = document.querySelector(".product-tabs__single-title--active");
      const activeContent = document.querySelector(".product-tabs__single-content--active");
      const targetContent = document.querySelector('.product-tabs__single-content[data-tab-num="' + index + '"]');

      activeTab.classList.remove("product-tabs__single-title--active");
      activeContent.classList.remove("product-tabs__single-content--active");
      targetContent.classList.add("product-tabs__single-content--active");
      tab.classList.add("product-tabs__single-title--active");
    });
  });
};

// FAQ
export const initProductFaqs = () => {
  if (!productFaq) {
    return;
  }

  productFaq.forEach((faq) => {
    faq.addEventListener("click", () => {
      const activeFaq = document.querySelector(".faq__single--active");

      if (faq.classList.contains("faq__single--active")) {
        faq.classList.remove("faq__single--active");
      } else {
        if (activeFaq) {
          activeFaq.classList.remove("faq__single--active");
        }
        faq.classList.add("faq__single--active");
      }
    });
  });
};

// Menu dropdowns
export const initMenuDropdown = () => {
  if (!dropdownMenu) {
    return;
  }

  const menuItems = document.querySelectorAll(".site-header__list-item");

  menuItems.forEach((item) => {
    item.addEventListener("mouseover", () => {
      if (item.querySelector(".site-header__dropdown")) {
        item.classList.add("site-header__list-item--hovered");
      }
    });

    item.addEventListener("mouseleave", () => {
      if (item.querySelector(".site-header__dropdown")) {
        item.classList.remove("site-header__list-item--hovered");
      }
    });
  });
};

// Fixed menu on scroll
export const initScrollingMenu = () => {
  var header = document.querySelector(".site-header");

  checkScrolled(header);

  document.addEventListener("scroll", () => {
    checkScrolled(header);
  });
};

function checkScrolled(header) {
  var scrollTop =
    window.pageYOffset !== undefined
      ? window.pageYOffset
      : (document.documentElement || document.body.parentNode || document.body).scrollTop;

  if (scrollTop > 20) {
    header.classList.add("site-header--scrolled");
  } else {
    header.classList.remove("site-header--scrolled");
  }
}