const tabIndicator = document.querySelector("#tab-indicator");
const tabs = document.querySelectorAll(".tab");
const pages = document.querySelectorAll(".page");
const pageFrames = document.querySelectorAll(".page-frame");
let activeIndex = 0;

function activate(index) {
  activeIndex = index;
  const button = tabs[index];

  tabIndicator.style.left = button.offsetLeft + "px";
  tabIndicator.style.width = button.offsetWidth + "px";

  tabs.forEach((tab, i) => {
    tab.style.color = i === index ? "white" : "var(--color-secondary)";
    tab.style.fontWeight = i === index ? "600" : "400";
  });
  pages.forEach((page, i) => {
    if (i === index) {
      page.classList.remove("max-sm:hidden");
      if (page.parentElement.tagName === "DIV") {
        page.parentElement.classList.remove("max-sm:hidden");
      }
    } else {
      page.classList.add("max-sm:hidden");
    }
  });
  pageFrames.forEach((pageFrame, i) => {
    shouldShowPages = false;
    for (const page of pageFrame.children) {
      if (!page.classList.contains("max-sm:hidden")) {
        shouldShowPages = true;
      }
    }

    if (shouldShowPages) pageFrame.classList.remove("max-sm:hidden");
    else pageFrame.classList.add("max-sm:hidden");
  });
}

tabs.forEach((tab, i) => {
  tab.addEventListener("click", () => activate(i));
});

requestAnimationFrame(() => activate(0));
window.addEventListener("resize", () => activate(activeIndex));