managarten/apps/manacore/apps/mobile/utils/themeContext.tsx

import React, { createContext, useState, useContext, useEffect } from 'react';
import { useColorScheme } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

// Definiere die möglichen Theme-Modi
export type ThemeMode = 'light' | 'dark' | 'system';

// Theme-Kontext-Interface
interface ThemeContextType {
	themeMode: ThemeMode;
	isDarkMode: boolean;
	setThemeMode: (mode: ThemeMode) => void;
}

// Erstelle den Theme-Kontext
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// Theme Provider-Komponente
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
	// Hole das Systemthema
	const systemColorScheme = useColorScheme();

	// State für den Theme-Modus
	const [themeMode, setThemeModeState] = useState<ThemeMode>('system');

	// Berechne, ob der Dark Mode aktiv ist
	const isDarkMode = themeMode === 'system' ? systemColorScheme === 'dark' : themeMode === 'dark';

	// Lade den gespeicherten Theme-Modus beim Start
	useEffect(() => {
		const loadThemeMode = async () => {
			try {
				const savedThemeMode = await AsyncStorage.getItem('themeMode');
				if (savedThemeMode) {
					setThemeModeState(savedThemeMode as ThemeMode);
				}
			} catch (error) {
				console.error('Fehler beim Laden des Theme-Modus:', error);
			}
		};

		loadThemeMode();
	}, []);

	// Funktion zum Ändern des Theme-Modus
	const setThemeMode = async (mode: ThemeMode) => {
		try {
			await AsyncStorage.setItem('themeMode', mode);
			setThemeModeState(mode);
		} catch (error) {
			console.error('Fehler beim Speichern des Theme-Modus:', error);
		}
	};

	return (
		<ThemeContext.Provider value={{ themeMode, isDarkMode, setThemeMode }}>
			{children}
		</ThemeContext.Provider>
	);
};

// Hook zum Verwenden des Theme-Kontexts
export const useTheme = () => {
	const context = useContext(ThemeContext);
	if (context === undefined) {
		throw new Error('useTheme muss innerhalb eines ThemeProviders verwendet werden');
	}
	return context;
};

// Farbpaletten für Light und Dark Mode
export const lightColors = {
	background: '#FFFFFF',
	backgroundSecondary: '#F5F5F5',
	text: '#1F2937',
	textSecondary: '#6B7280',
	primary: '#0055FF',
	primaryDark: '#0044CC',
	border: '#E5E7EB',
	error: '#EF4444',
	success: '#10B981',
	warning: '#F59E0B',
	card: '#FFFFFF',
	cardShadow: 'rgba(0, 0, 0, 0.1)',
};

export const darkColors = {
	background: '#121212',
	backgroundSecondary: '#1E1E1E',
	text: '#F9FAFB',
	textSecondary: '#9CA3AF',
	primary: '#3B82F6',
	primaryDark: '#2563EB',
	border: '#374151',
	error: '#F87171',
	success: '#34D399',
	warning: '#FBBF24',
	card: '#1E1E1E',
	cardShadow: 'rgba(0, 0, 0, 0.5)',
};

// Funktion zum Abrufen der aktuellen Farbpalette basierend auf dem Theme-Modus
export const useThemeColors = () => {
	const { isDarkMode } = useTheme();
	return isDarkMode ? darkColors : lightColors;
};