// navbar scripts

(() => {
  let root = document.querySelector(":root");

  // navbar dropdown module
  const dropdowns = {
    nav: document.querySelector("nav"),
    buttons: document.querySelectorAll("[bb-dropdown-button"),
    dialogs: document.querySelectorAll("[bb-dropdown-dialog]"),
    hoverDropdowns: document.querySelectorAll("[bb-hover-dropdown]"),

    handleClick(event) {
      // get target dialog
      let targetDialog = document.querySelectorAll(
        `[bb-dropdown-dialog=${event.currentTarget.getAttribute(
          "bb-dropdown-button"
        )}]`
      );

      // hide all other dialogs that are not the target dialog
      this.dialogs.forEach((dialog) => {
        dialog !== targetDialog[0] ? dialog.close() : "";
      });

      // toggle dialog
      targetDialog.forEach((dialog) => {
        dialog.hasAttribute("open") ? dialog.close() : dialog.show();
      });
    },

    closeAll() {
      this.dialogs.forEach((dialog) => {
        dialog.close();
      });
    },

    attachEvents() {
      // do generic dialog buttons
      this.buttons.forEach((button) => {
        button.addEventListener("click", (event) => {
          this.handleClick(event);
        });
      });

      // handle clickout
      document.addEventListener("click", (event) => {
        let isIn =
          event.target.closest("[bb-dropdown-button]") ||
          event.target.closest("[bb-dropdown-dialog]");
        !isIn ? this.closeAll() : "";
      });

      // handle mouseenter on hover dropdowns

      this.hoverDropdowns.forEach((dropdown) => {
        dropdown.addEventListener("mouseenter", () => {
          this.closeAll();
        });
      });

      // handle keyboard shortcuts
      document.addEventListener("keydown", (event) => {
        if ((event.metaKey || event.ctrlKey) && event.keyCode === 75) {
          event.preventDefault(); // Prevents default browser behavior
          searchDialog.show();
        }

        if (searchDialog.open && event.code === "Enter") {
          window.open(`/search?query=${searchField.value}`, "_self");
        }

        this.dialogs.forEach((dialog) => {
          if (dialog.open && event.code === "Escape") {
            dialog.close();
          }
        });
      });
    },
  };

  dropdowns.attachEvents();
  const navbarAlertBanner = document.querySelector(".nav-alert-banner");

  // scroll padding adjustment
  function handleScroll() {
    if (window.scrollY > 60) {
      root.style.setProperty(
        "--_layout---navbar--y-offset",
        "var(--size--1-5)"
      );

      if (navbarAlertBanner) {
        navbarAlertBanner.style.translate = "0 -50%";
        navbarAlertBanner.style.opacity = "0";
      }
    } else {
      root.style.setProperty("--_layout---navbar--y-offset", "var(--size--5");
      if (navbarAlertBanner) {
        navbarAlertBanner.style.translate = "0 0";
        navbarAlertBanner.style.opacity = "1";
      }
    }
  }

  window.addEventListener("scroll", () => {
    handleScroll();
  });

  function toggleHamburgerMenu(button) {
    let menu = button.closest(".mobile-menu");
    if (menu.hasAttribute("open")) {
      menu.removeAttribute("open");
    } else {
      menu.setAttribute("open", "");
    }
  }

  class RiveMenu {
    constructor(el, src) {
      this.el = el;
      this.src = src;
      this.canvas = this.el.querySelector("canvas");
      this.triggers = Array.from(
        this.el.querySelectorAll("[data-rive-trigger]")
      );
      this.triggers.reverse();
      this.rive;
      this.init();
    }
    attachEvents() {
      this.triggers.forEach((button, index) => {
        button.addEventListener("mouseenter", () => {
          let inputs = this.rive.stateMachineInputs("State Machine 1");
          inputs.forEach((input) => {
            input.value = false;
          });
          this.rive.play("State Machine 1");
          inputs[index].value = true;
        });
        button.addEventListener("mouseleave", () => {
          let inputs = this.rive.stateMachineInputs("State Machine 1");

          inputs.forEach((input) => {
            input.value = false;
          });
          this.rive.play("State Machine 1");
        });
      });
    }

    init() {
      console.log("initializing...");
      this.rive = new rive.Rive({
        src: this.src,
        canvas: this.canvas,
        artboard: "Artboard",
        stateMachines: ["State Machine 1"],
        onLoad: () => {
          this.rive.resizeDrawingSurfaceToCanvas();
          let inputs = this.rive.stateMachineInputs("State Machine 1");
          inputs[0].value = true;
        },
      });
      this.attachEvents();
    }
  }

  let rlStudiosRives = document.querySelectorAll(
    '[data-nav-target="studiosDropdown"]'
  );
  rlStudiosRives.forEach((target) => {
    new RiveMenu(
      target,
      "https://cdn.prod.website-files.com/683736bdc500306f3d537622/689a7f7cd0b9e2885c66b119_rl_studios%20dropdown_hover_(1).riv"
    );
  });

  let rnStudiosRives = document.querySelectorAll(
    '[data-nav-target="rnStudiosDropdown"]'
  );
  rnStudiosRives.forEach((target) => {
    new RiveMenu(
      target,
      "https://cdn.prod.website-files.com/683736bdc500306f3d537622/689f941a03586c1d395a505c_rn_studios_hover_(1).riv"
    );
  });

  let rlResourcesRives = document.querySelectorAll(
    '[data-nav-target="resourcesDropdown"]'
  );
  rlResourcesRives.forEach((target) => {
    new RiveMenu(
      target,
      "https://cdn.prod.website-files.com/683736bdc500306f3d537622/689a9cf5b391444ed28ebf93_rl_resrources%20dropdown_hover_(1).riv"
    );
  });

  const hamburgerButtons = document.querySelectorAll(".hamburger-button");

  hamburgerButtons.forEach((button) => {
    button.addEventListener("click", (e) => {
      toggleHamburgerMenu(e.currentTarget);
    });
  });

  const allResults = document.querySelector("#viewAllResults");
  if (allResults) {
    allResults.onclick = () => {
      window.open(`/search?query=${searchField.value}`, "_self");
    };
  }

  const allAccordions = document.querySelectorAll("summary");

  for (const acc of allAccordions) {
    acc.addEventListener("click", () => {
      setTimeout(() => {
        lenis.resize();
      }, 500);
    });
  }

  ScrollTrigger.config({ ignoreMobileResize: true });
})();