const body = document.body;
const queryAll = (sel) => document.querySelectorAll(sel);

const initTheme = () => {
  const curTheme = localStorage.getItem("theme");
  const oldTheme = curTheme == "dark" ? "light" : "dark";
  body.classList.add(`${curTheme}-theme`);
  body.classList.remove(`${oldTheme}-theme`);
};

if (localStorage.getItem("theme") === null) {
  localStorage.setItem(
    "theme",
    window.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light",
  );
}

initTheme();

const toggleTheme = (ev) => {
  localStorage.setItem(
    "theme",
    localStorage.getItem("theme") == "dark" ? "light" : "dark",
  );
  initTheme();
  if (!!ev.target) ev.preventDefault();
  return false;
};

queryAll(".theme-toggler").forEach((a) =>
  a.addEventListener("click", toggleTheme)
);
queryAll(".js-only").forEach((a) => a.classList.remove("js-only"));
queryAll(".js-disabled-only").forEach((a) => a.remove());

const initAlign = () => {
  const cur = localStorage.getItem("align");
  const prev = cur == "center" ? "left" : "center";
  body.classList.add("align-" + cur);
  body.classList.remove("align-" + prev);
};

if (localStorage.getItem("align") === null) {
  localStorage.setItem("align", "center");
}

initAlign();

const toggleAlign = (ev) => {
  localStorage.setItem(
    "align",
    localStorage.getItem("align") == "center" ? "left" : "center",
  );
  initAlign();
  if (!!ev.target) ev.preventDefault();
  return false;
};

queryAll(".align-toggler").forEach((a) =>
  a.addEventListener("click", toggleAlign)
);

window.addEventListener("load", (_ev) => {
  const selector = [1, 2, 3, 4, 5, 6].map((n) => `h${n}[id]`).join(",");
  queryAll(selector).forEach((el) => {
    const anchorLink = document.createElement("a");
    anchorLink.classList.add("anchor-link");
    anchorLink.textContent = "§";
    anchorLink.href = `#${el.id}`;
    el.appendChild(anchorLink);
  });
});

function initCodeCopyButtons() {
  const codeBlocks = document.querySelectorAll("pre.chroma");
  codeBlocks.forEach((block) => {
    const code = block.querySelectorAll("code")[0];
    const button = document.createElement("button");
    button.classList.add("copy-code-button");
    block.appendChild(button);
    button.textContent = "Copy";
    button.addEventListener("click", (_ev) => {
      navigator.clipboard.writeText(code.textContent);
      const lastText = button.textContent;
      button.textContent = "Copied to clipbooard!";
      setTimeout(() => button.textContent = lastText, 3000);
    });
  });
}

window.addEventListener("load", (_ev) => {
  initCodeCopyButtons();
});