managarten/nutriphi/apps/mobile/hooks/useTheme.ts

import { useColorScheme } from 'nativewind';
import { useAppStore } from '../store/AppStore';
import { useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const THEME_STORAGE_KEY = 'user-theme-preference';

export const useTheme = () => {
  const { colorScheme, setColorScheme } = useColorScheme();
  const { theme, setTheme } = useAppStore();

  // Initialize theme from storage on app start
  useEffect(() => {
    const initializeTheme = async () => {
      try {
        const storedTheme = await AsyncStorage.getItem(THEME_STORAGE_KEY);
        if (storedTheme && ['light', 'dark', 'system'].includes(storedTheme)) {
          const parsedTheme = storedTheme as 'light' | 'dark' | 'system';
          setTheme(parsedTheme);

          // Apply the theme to NativeWind
          if (parsedTheme === 'system') {
            setColorScheme('system');
          } else {
            setColorScheme(parsedTheme);
          }
        }
      } catch (error) {
        console.error('Error loading theme from storage:', error);
      }
    };

    initializeTheme();
  }, [setTheme, setColorScheme]);

  const updateTheme = async (newTheme: 'light' | 'dark' | 'system') => {
    try {
      // Update AppStore
      setTheme(newTheme);

      // Update NativeWind
      if (newTheme === 'system') {
        setColorScheme('system');
      } else {
        setColorScheme(newTheme);
      }

      // Persist to storage
      await AsyncStorage.setItem(THEME_STORAGE_KEY, newTheme);
    } catch (error) {
      console.error('Error saving theme to storage:', error);
    }
  };

  return {
    theme,
    colorScheme,
    updateTheme,
    isDark: colorScheme === 'dark',
    isLight: colorScheme === 'light',
  };
};