import { useEffect, useState } from "react";

export enum Theme {
  "dark" = "dark",
  "light" = "light",
}

export const useTheme = () => {
  const [theme, setTheme] = useState(Theme.light);

  const toggle = () => {
    const nextTheme = theme === "dark" ? Theme.light : Theme.dark;
    setTheme(nextTheme);
  };

  useEffect(() => {
    const body = document.body;
    if (theme === "dark") {
      body.setAttribute("theme-mode", "dark");
      return;
    }

    if (theme === "light") {
      body.setAttribute("theme-mode", "light");
      return;
    }
  }, [theme]);

  useEffect(() => {
    const mql = window.matchMedia("(prefers-color-scheme: dark)");

    function matchMode(e) {
      if (e.matches) {
        setTheme(Theme.dark);
      } else {
        setTheme(Theme.light);
      }
    }

    matchMode(mql);
    mql.addEventListener("change", matchMode);
  }, []);

  return {
    theme,
    toggle,
  };
};