import { useFetchers } from "react-router";
import { useHints, useRequestInfo } from "../utils";

export function useTheme() {
  const hints = useHints();
  const requestInfo = useRequestInfo();
  const optimisticMode = useOptimisticThemeMode();
  if (optimisticMode) {
    return optimisticMode === "system" ? hints.theme : optimisticMode;
  }
  return {
    mode: requestInfo.userPrefs.theme ?? hints.theme,
    isSystem: optimisticMode === "system" || !requestInfo.userPrefs.theme,
  };
}

export function useOptimisticThemeMode() {
  const fetchers = useFetchers();
  const themeFetcher = fetchers.find((f) => f.formAction === "/");

  if (themeFetcher?.formData) {
    return themeFetcher.formData.get("theme") as "system" | "light" | "dark";
  }
}