import { DarkTheme, DefaultTheme, type Theme } from "@react-navigation/native";
import { useMemo } from "react";

import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
import { useUniwindTheme } from "./useUniwindTheme";

/**
 * React Navigation requires a JS theme object. Derive it from the same palette
 * source as Uniwind instead of subscribing the app root to CSS variables. The
 * preferences provider applies the registered Uniwind theme first, then
 * publishes this matching navigation palette through React.
 */
export function useMobileNavigationTheme(): Theme {
  const { themeAppearance: appearance } = useAppearancePreferences();
  const variables = useUniwindTheme();
  return useMemo(() => {
    const base = appearance === "dark" ? DarkTheme : DefaultTheme;
    return {
      ...base,
      colors: {
        ...base.colors,
        primary: variables["--color-primary"],
        background: variables["--color-screen"],
        card: variables["--color-sheet-solid"],
        text: variables["--color-foreground"],
        border: variables["--color-header-border"],
        notification: variables["--color-danger-foreground"],
      },
    };
  }, [appearance, variables]);
}