import { Colors } from '@/constants/Colors';
import { FontColor, Fonts } from '@/constants/Fonts';
import { useThemeColor } from '@/hooks/useThemeColor';
import { View, type ViewProps } from 'react-native';
import { ColorValue, isFontColorKey, ThemeColor } from './ThemedText';

type ThemedViewProps = ViewProps & {
  className?: string;
  bgColor?: FontColor | ColorValue | string;
};

export function ThemedView({ className, style, bgColor, ...props }: ThemedViewProps) {
  const themeColor = useThemeColor({ light: bgColor, dark: bgColor }, 'background');

  const bgColorValue = (() => {
    if (!bgColor) return themeColor;

    // 检查是否是主题颜色
    const themeColors = Object.keys(Colors.light) as ThemeColor[];
    if (themeColors.includes(bgColor as ThemeColor)) {
      return useThemeColor({ light: bgColor, dark: bgColor }, bgColor as ThemeColor);
    }
    // 检查是否是 Fonts 中定义的颜色
    if (isFontColorKey(bgColor)) {
      return Fonts[bgColor];
    }
    // 返回自定义颜色值
    return bgColor;
  })();

  return <View className={className} style={[{ backgroundColor: bgColorValue }, style]} {...props} />;
}