// template/src/components/ThemedText/index.tsx
import React from "react";
import { Text, TextProps, StyleProp, TextStyle } from "react-native";
import { useTheme } from "../../theme/ThemeProvider";

type TextVariant = 
  | 'heading' 
  | 'subheading'
  | 'body' 
  | 'bodyLarge'
  | 'bodySmall'
  | 'caption'
  | 'label'
  | 'labelSmall'
  | 'amount'
  | 'amountLarge'
  | 'accountNumber';

interface ThemedTextProps extends TextProps {
    children: React.ReactNode;
    variant?: TextVariant;
    color?: 'primary' | 'secondary' | 'accent' | 'error' | 'success' | 'warning';
    style?: StyleProp<TextStyle>;
}

export const ThemedText: React.FC<ThemedTextProps> = ({
    children,
    variant = 'body',
    color,
    style,
    ...rest
}) => {
    const { theme } = useTheme();

    const baseStyle = theme.textStyles[variant];
    
    // Determine the color based on variant and color prop
    const getTextColor = () => {
        if (color) {
            // If specific color is requested
            switch (color) {
                case 'primary':
                    return theme.colors.primary[500];
                case 'secondary':
                    return theme.colors.textSecondary;
                case 'accent':
                    return theme.colors.accent;
                case 'error':
                    return theme.colors.semantic.error;
                case 'success':
                    return theme.colors.semantic.success;
                case 'warning':
                    return theme.colors.semantic.warning;
                default:
                    return theme.colors.text;
            }
        }
        
        // Default colors based on variant
        switch (variant) {
            case 'heading':
            case 'subheading':
            case 'label':
            case 'labelSmall':
            case 'amount':
            case 'amountLarge':
                return theme.colors.text; // Primary text color for important text
            case 'body':
            case 'bodyLarge':
            case 'bodySmall':
                return theme.colors.text; // Primary text color for body
            case 'caption':
            case 'accountNumber':
                return theme.colors.textSecondary; // Secondary text color for supporting text
            default:
                return theme.colors.text;
        }
    };

    const finalStyle = [
        baseStyle,
        { color: getTextColor() },
        style // User styles come last to allow overrides
    ];

    return (
        <Text style={finalStyle} {...rest}>
            {children}
        </Text>
    );
};