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"),
    images: document.querySelectorAll("img"),
  };

  console.log(nodes.images);

  // 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));
  });

  nodes.images.forEach((image) => {
    if (image.complete) {
      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 > 120) &
      !nodes.nav.classList.contains("main-nav--small")
    ) {
      nodes.nav.classList.add("main-nav--small");
    } else if (window.scrollY < 100) {
      nodes.nav.classList.remove("main-nav--small");
    }
  });
});