export type ChromeColorScheme = "light" | "dark";

export const CHROME_COLORS: Record<
  ChromeColorScheme,
  { base: string; dimmed: string }
> = {
  light: { base: "#ffffff", dimmed: "#999999" },
  dark: { base: "#242424", dimmed: "#161616" },
};

// theme-color meta ownership: while a drawer holds a dimmed color, base
// writes (from scheme/theme changes) must not overwrite it.
let dimmedDepth = 0;

export function setBaseThemeColor(color: string): void {
  if (dimmedDepth === 0) setThemeColorMeta(color);
}

export function pushDimmedThemeColor(color: string): void {
  dimmedDepth++;
  setThemeColorMeta(color);
}

export function popDimmedThemeColor(base: string): void {
  dimmedDepth = Math.max(0, dimmedDepth - 1);
  if (dimmedDepth === 0) setThemeColorMeta(base);
}

export function setThemeColorMeta(color: string): void {
  if (typeof document === "undefined") return;

  const metas = document.querySelectorAll<HTMLMetaElement>(
    'meta[name="theme-color"]'
  );

  if (metas.length === 0) {
    const meta = document.createElement("meta");
    meta.name = "theme-color";
    meta.content = color;
    document.head.appendChild(meta);
    return;
  }

  metas.forEach((meta) => {
    meta.removeAttribute("media");
    meta.setAttribute("content", color);
  });
}