---
import type { HTMLAttributes } from "astro/types";

export type Props = HTMLAttributes<"button">;

const { class: className, ...props } = Astro.props;
---

<button
  class:list={[
    "theme-toggle flex items-center justify-center text-base-500 hover:text-base-700 dark:text-base-500 dark:hover:text-base-300",
    className,
  ]}
  data-theme-toggle
  {...props}
>
  <span class="sr-only">Theme Toggle</span>

  <!-- Dark Mode Icon -->
  <!-- <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor"
    class="w-5 h-5 hidden dark:block"
  >
    <path
      fill-rule="evenodd"
      d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z"
      clip-rule="evenodd"></path>
  </svg> -->
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke-width="1.5"
    stroke="currentColor"
    class="size-5 hidden dark:block"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
    ></path>
  </svg>

  <!-- Light Mode Icon -->
  <!-- <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor"
    class="w-5 h-5 block dark:hidden"
  >
    <path
      d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"
    ></path>
  </svg> -->
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke-width="1.5"
    stroke="currentColor"
    class="size-5 block dark:hidden"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
    ></path>
  </svg>
</button>

<noscript>
  <style>
    .theme-toggle {
      display: none;
    }
  </style>
</noscript>

<script>
  (() => {
    let darkMode = false;

    function setTheme(dark: boolean) {
      const root = document.documentElement;
      if (dark) {
        root.classList.add("dark");
      } else {
        root.classList.remove("dark");
      }
    }

    function toggleTheme() {
      darkMode = !darkMode;
      localStorage.setItem("darkMode", JSON.stringify(darkMode));
      setTheme(darkMode);

      // send event to everyone
      const event = new CustomEvent("theme-toggle", {
        detail: {
          darkMode,
        },
      });
      document.dispatchEvent(event);
    }

    // Initialize theme on page load
    const savedDarkMode = localStorage.getItem("darkMode");
    if (savedDarkMode !== null) {
      darkMode = JSON.parse(savedDarkMode);
    } else {
      darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
    }
    setTheme(darkMode);

    // Listen to system theme changes
    window
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", (e) => e.matches && toggleTheme());

    window
      .matchMedia("(prefers-color-scheme: light)")
      .addEventListener("change", (e) => e.matches && toggleTheme());

    // Add click event to toggle button
    document
      .querySelector("button[data-theme-toggle]")
      ?.addEventListener("click", toggleTheme);
  })();
</script>