---
import Sun from "@/assets/sun.svg";
import Moon from "@/assets/moon.svg";

interface Props {
  colours: {
    bg: string;
    fg: string;
  };
}

const { colours } = Astro.props;
---

<button
  aria-label="toggle colour scheme"
  id="colour-toggle"
  style="visibility: hidden"
>
  <Sun data-mode-light />
  <Moon data-mode-dark />
</button>

<style define:vars={colours}>
  #colour-toggle {
    background-color: var(--bg);

    border: none;
    border-radius: 50%;
    padding: 5px;

    width: 34px;
    height: 34px;

    & svg {
      fill: var(--fg);
      stroke: var(--fg);
    }
  }
</style>

<script>
  const root = document.querySelector(":root");
  if (!(root instanceof HTMLElement)) throw new Error(":root is not html");

  const button = document.getElementById("colour-toggle");
  if (!button) throw new Error("No #colour-toggle element");

  const modeToggled = {
    light: document.querySelectorAll("[data-mode-light]"),
    dark: document.querySelectorAll("[data-mode-dark]"),
  };

  const cookies = document.cookie
    .split("; ")
    .reduce<
      Record<string, string>
    >((prev, cur) => ({ ...prev, [cur.split("=")[0]]: cur.split("=")[1] }), {});

  const mediaMode = matchMedia("(prefers-color-scheme: light)").matches;
  const cookieMode =
    cookies["colour-mode"] === "light"
      ? true
      : cookies["colour-mode"] === "dark"
        ? false
        : undefined;
  let lightMode = cookieMode ?? mediaMode;

  const updateColourScheme = () => {
    root.style.colorScheme = lightMode ? "light" : "dark";
    document.cookie = `colour-mode=${root.style.colorScheme};path=/`;

    modeToggled[lightMode ? "light" : "dark"].forEach((el) => {
      if (!(el instanceof SVGElement || el instanceof HTMLElement)) return;
      el.style.display = "block";
    });

    modeToggled[!lightMode ? "light" : "dark"].forEach((el) => {
      if (!(el instanceof SVGElement || el instanceof HTMLElement)) return;
      el.style.display = "none";
    });
  };

  updateColourScheme();
  button.addEventListener("click", () => {
    lightMode = !lightMode;
    updateColourScheme();
  });
  button.style.visibility = "visible";
</script>