managarten/apps/picture/apps/mobile/contexts/ThemeContext.tsx

import React, { createContext, useContext, useEffect, ReactNode } from 'react';
import { StatusBar } from 'react-native';
import { useThemeStore, useTheme as useThemeHook } from '~/store/themeStore';
import type { NativeTheme as Theme, ThemeVariant, ColorMode } from '@picture/design-tokens/native';

// ThemeMode includes 'system' for automatic light/dark switching
type ThemeMode = ColorMode | 'system';

interface ThemeContextValue {
	theme: Theme;
	variant: ThemeVariant;
	mode: ThemeMode;
	actualMode: 'light' | 'dark';
	isLoading: boolean;
	setVariant: (variant: ThemeVariant) => Promise<void>;
	setMode: (mode: ThemeMode) => Promise<void>;
	toggleMode: () => void;
}

const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

interface ThemeProviderProps {
	children: ReactNode;
}

export function ThemeProvider({ children }: ThemeProviderProps) {
	const loadTheme = useThemeStore((state) => state.loadTheme);
	const themeData = useThemeHook();

	// Load theme on mount
	useEffect(() => {
		loadTheme();
	}, []);

	// Update StatusBar when theme changes
	useEffect(() => {
		if (!themeData.isLoading) {
			StatusBar.setBarStyle(
				themeData.actualMode === 'dark' ? 'light-content' : 'dark-content',
				true
			);
		}
	}, [themeData.actualMode, themeData.isLoading]);

	return <ThemeContext.Provider value={themeData}>{children}</ThemeContext.Provider>;
}

export function useTheme(): ThemeContextValue {
	const context = useContext(ThemeContext);
	if (context === undefined) {
		// During initial render, return the hook directly as fallback
		// This prevents crashes when components render before ThemeProvider is ready
		return useThemeHook();
	}
	return context;
}