rn-app/hooks/useTheme.ts

/**
 * 主题 Hooks
 * 
 * 提供统一的主题访问接口
 */

import { useMemo } from 'react';
import { useColorScheme as useSystemColorScheme } from 'react-native';
import { useTheme as useThemeStore } from '@/stores';
import Colors from '@/constants/Colors';

/**
 * 获取当前颜色方案（light | dark）
 * 
 * 从 settingsStore 读取用户设置的主题
 * 支持 'light' | 'dark' | 'auto' 三种模式
 */
export function useColorScheme(): 'light' | 'dark' {
  const userTheme = useThemeStore();
  const systemTheme = useSystemColorScheme();

  // 如果用户选择了 'auto'，则使用系统主题
  if (userTheme === 'auto') {
    return systemTheme === 'dark' ? 'dark' : 'light';
  }

  // 否则使用用户选择的主题
  return userTheme;
}

/**
 * 获取主题颜色
 * 
 * @param props - 可选的自定义颜色 { light?: string; dark?: string }
 * @param colorName - Colors 中定义的颜色名称
 * @returns 当前主题对应的颜色值
 * 
 * @example
 * ```tsx
 * const textColor = useThemeColor({}, 'text');
 * const customColor = useThemeColor({ light: '#000', dark: '#fff' }, 'text');
 * ```
 */
export function useThemeColor(
  props: { light?: string; dark?: string },
  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
): string {
  const theme = useColorScheme();
  const colorFromProps = props[theme];

  if (colorFromProps) {
    return colorFromProps;
  } else {
    return Colors[theme][colorName];
  }
}

/**
 * 获取完整的主题颜色对象
 * 
 * @returns 当前主题的所有颜色配置
 * 
 * @example
 * ```tsx
 * const colors = useThemeColors();
 * <View style={{ backgroundColor: colors.background }}>
 *   <Text style={{ color: colors.text }}>Hello</Text>
 * </View>
 * ```
 */
export function useThemeColors() {
  const theme = useColorScheme();
  
  return useMemo(() => {
    return Colors[theme];
  }, [theme]);
}

/**
 * 获取主题相关的所有信息
 * 
 * @returns 主题信息对象
 * 
 * @example
 * ```tsx
 * const { theme, colors, isDark } = useThemeInfo();
 * ```
 */
export function useThemeInfo() {
  const theme = useColorScheme();
  const colors = useThemeColors();
  
  return useMemo(() => ({
    theme,
    colors,
    isDark: theme === 'dark',
    isLight: theme === 'light',
  }), [theme, colors]);
}