import { createContext } from "react";
export const ReaderThemeContext = createContext("light");
export const themes = [
  { id: "light", label: "Light" },
  { id: "black", label: "Total black" },
  { id: "nord", label: "Nord" },
];

const themeIds = new Set(themes.map(({ id }) => id));

export function readThemePreference() {
  const cookie = document.cookie
    .split(";")
    .map((value) => value.trim())
    .find((value) => value.startsWith("odre.theme="));
  const cookieTheme = cookie?.slice("odre.theme=".length);
  if (themeIds.has(cookieTheme)) return cookieTheme;

  try {
    const storedTheme = JSON.parse(localStorage.getItem("odre.theme"));
    if (themeIds.has(storedTheme)) return storedTheme;
  } catch {
    // Theme preferences are optional.
  }

  return "light";
}

export function setDocumentTheme(value, root) {
  const theme = themeIds.has(value) ? value : "light";
  if (root) root.dataset.readerTheme = theme;
  window.dispatchEvent(new Event("odre-theme-change"));
  return theme;
}