const getById = (id) => document.getElementById(id);
const getByClass = (className) => document.getElementsByClassName(className)[0];

const themeBtn = getById("theme-switcher");
const hamburger = getByClass("hamburger");
const hamburgerIcon = hamburger.children[0]
const menu = document.getElementsByTagName("nav")[0];
const imgs = document.getElementsByTagName("img");
const main = document.getElementsByTagName("main")[0];
const isMenuOpen = () => hamburger.classList.contains("open");
const theme = window.localStorage.getItem("theme");
const body = document.getElementsByClassName("theme")[0];

/* Functions */

const changeToDarkTheme = () => {
  body.classList = "theme dark"
  window.localStorage.setItem("theme", "dark");
  themeBtn?.setAttribute("title", "turn the light on");
  Array.from(imgs).forEach((img) => img.src = img.src.replace("-light", "-dark"));
}

const changeToLightTheme = () => {
  body.classList = "theme light"
  window.localStorage.setItem("theme", "light");
  themeBtn?.setAttribute("title", "turn the light off");
  Array.from(imgs).forEach((img) => img.src = img.src.replace("-dark", "-light"));
}

const closeMenu = () => {
  hamburger.classList = "hamburger closed"
  hamburgerIcon.src = hamburgerIcon.src.replace("opened", "closed");
  menu.classList = "menu closed";
}

const openMenu = () => {
  hamburger.classList = "hamburger open"
  hamburgerIcon.src = hamburgerIcon.src.replace("closed", "opened");
  menu.classList = "menu open";
}

/* Listeners */

window.addEventListener("resize", () => isMenuOpen() && closeMenu());
main.addEventListener("click", () => isMenuOpen() && closeMenu());
hamburger.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu());

themeBtn.addEventListener("click", () => {
  const title = themeBtn.getAttribute("title") ?? "off"
  if (title.indexOf("off") !== -1) changeToDarkTheme();
  else changeToLightTheme();
});

/* Rest */

const userPerfersDark = window?.matchMedia?.("(prefers-color-scheme: dark)").matches
if (!theme && userPerfersDark) changeToDarkTheme();
else theme === "light" ? changeToLightTheme() : changeToDarkTheme();