import { StyleProp, StyleSheet, Text, TextStyle, type TextProps } from 'react-native';

import { Colors } from '@/constants/Colors';
import { FontColor, Fonts, FontSize, FontWeight } from '@/constants/Fonts';
import { useThemeColor } from '@/hooks/useThemeColor';

export type ThemeColor = keyof typeof Colors.light & keyof typeof Colors.dark;
export type ColorValue = `#${string}` | `rgb(${string})` | `rgba(${string})` | string;

export type ThemedTextProps = TextProps & {
  lightColor?: string;
  darkColor?: string;
  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link' | 'sfPro' | 'inter';
  weight?: FontWeight;
  size?: FontSize;
  radius?: FontSize
  color?: ThemeColor | FontColor | ColorValue;
};

export function isFontColorKey(key: string): key is FontColor {
  return ['bgPrimary', 'bgSecondary', 'textPrimary', 'textSecondary', 'textThird', 'textWhite'].includes(key);
}

export function ThemedText({
  style,
  lightColor,
  darkColor,
  type = 'default',
  weight = 'regular',
  size,
  radius,
  color,
  ...rest
}: ThemedTextProps) {

  const themeColor = useThemeColor({ light: lightColor, dark: darkColor }, 'text');

  const textColor = (() => {
    if (!color) return themeColor;

    // 检查是否是主题颜色
    const themeColors = Object.keys(Colors.light) as ThemeColor[];
    if (themeColors.includes(color as ThemeColor)) {
      return useThemeColor({ light: lightColor, dark: darkColor }, color as ThemeColor);
    }

    // 检查是否是 Fonts 中定义的颜色
    if (isFontColorKey(color)) {
      return Fonts[color as FontColor];
    }

    // 返回自定义颜色值
    return color;
  })();


  const baseStyle: StyleProp<TextStyle> = {
    fontFamily: Fonts.quicksand,
    color: textColor,
    fontWeight: Number(Fonts[weight as keyof typeof Fonts]) as TextStyle['fontWeight'],
  };

  return (
    <Text
      style={[
        baseStyle,
        type === 'default' ? styles.default : undefined,
        type === 'title' ? styles.title : undefined,
        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
        type === 'subtitle' ? styles.subtitle : undefined,
        type === 'link' ? styles.link : undefined,
        type === 'sfPro' ? styles.sfPro : undefined,
        type === 'inter' ? styles.inter : undefined,
        size && { fontSize: Number(Fonts[size as keyof typeof Fonts]) },
        weight && { fontWeight: Number(Fonts[weight as keyof typeof Fonts]) as TextStyle['fontWeight'] },
        color && { color: textColor },
        style,
      ]}
      {...rest}
    />
  );
}

const styles = StyleSheet.create({
  default: {
    fontSize: Number(Fonts.base),
    lineHeight: 24,
    fontFamily: Fonts.quicksand,
  },
  defaultSemiBold: {
    fontSize: Number(Fonts.base),
    lineHeight: 24,
    fontWeight: '600',
  },
  title: {
    fontSize: Fonts['2xl'],
    fontWeight: '700',
    lineHeight: 32,
  },
  subtitle: {
    fontSize: Fonts.lg,
    fontWeight: '600',
    lineHeight: 28,
  },
  link: {
    fontSize: Fonts.sm,
    lineHeight: 20,
    color: '#0a7ea4',
    textDecorationLine: 'underline',
  },
  sfPro: {
    fontSize: Number(Fonts.base),
    lineHeight: 24,
    fontWeight: '600',
    fontFamily: Fonts.sfPro,
  },
  inter: {
    fontSize: Number(Fonts.base),
    lineHeight: 24,
    fontWeight: '600',
    fontFamily: Fonts.inter,
  },
});