import React from "react"
import { usePreference } from "@workspace/preferences"

import type { ThemeMode } from "./preferences"
import type { ThemeScheme } from "./theme"

const systemThemeQuery = "(prefers-color-scheme: dark)"

function subscribeToSystemTheme(listener: VoidFunction) {
  const mediaQuery = window.matchMedia(systemThemeQuery)
  mediaQuery.addEventListener("change", listener)
  return () => mediaQuery.removeEventListener("change", listener)
}

function getSystemTheme(): ThemeScheme {
  return window.matchMedia(systemThemeQuery).matches ? "dark" : "light"
}

function getServerSystemTheme(): ThemeScheme {
  return "light"
}

export function useResolvedTheme(): ThemeScheme {
  const themeMode: ThemeMode = usePreference("theme-mode")[0]
  const systemTheme = React.useSyncExternalStore(
    subscribeToSystemTheme,
    getSystemTheme,
    getServerSystemTheme
  )

  return themeMode === "system" ? systemTheme : themeMode
}