import { expandNav, closeNav, show } from "./functions.js";

document.addEventListener("DOMContentLoaded", () => {
  // Variables
  const nodes = {
    burgerBtn: document.querySelector(".burger-btn"),
    closeNavBtn: document.querySelector("#expanded-nav  .close-btn"),
    expandedNav: document.querySelector("#expanded-nav"),
    main: document.querySelector("main"),
    footer: document.querySelector(".main-footer"),
    nav: document.querySelector(".main-nav"),
    jsLinks: document.querySelectorAll(".js-link"),
  };

  // Listeners
  nodes.burgerBtn.addEventListener("click", () => expandNav(nodes));
  nodes.closeNavBtn.addEventListener("click", () => closeNav(nodes));
  nodes.jsLinks.forEach((jsLink) => {
    const to = jsLink.dataset.href;
    jsLink.addEventListener("click", () => (location.href = to));
  });

  document.querySelectorAll("img").forEach((image) => {
    if (image.complete && image.naturalWidth > 0) {
      show(image);
    } else {
      image.addEventListener("load", () => show(image));
    }
  });

  // Key shortcuts
  window.addEventListener("keyup", (event) => {
    if (event.key === "Escape") {
      closeNav(nodes);
    }
  });
  window.addEventListener("scroll", (event) => {
    if (nodes.expandedNav.classList.contains("open")) {
      closeNav(nodes);
    }
    if (
      window.scrollY > 130 &&
      !nodes.nav.classList.contains("main-nav--small")
    ) {
      nodes.nav.classList.add("main-nav--small");
    } else if (window.scrollY < 90) {
      nodes.nav.classList.remove("main-nav--small");
    }
  });
});