import { Text as DefaultText, View as DefaultView, useColorScheme} from "react-native";
import colors from "../constants/colors";

type ThemeProperties = {
    lightColor?: string;
    darkColor?: string;
};

/**
 * It is a TypeScript intersection type encompassing both ThemeProperties and DefaultReactComponent properties.
 */
export type TextProperties = ThemeProperties & DefaultText["props"];
export type ViewProperties = ThemeProperties & DefaultView["props"];


/**
 * This function 'useThemeColor' allows you to apply different colors for light and dark theme mode in a React Native application.
 * The function takes a 'properties' object (with possible 'light' and 'dark' properties representing color strings) and 'colorName' - a key from predefined colors for both 'light' and 'dark' mode.
 * The function first checks the current color scheme using the 'useColorScheme' hook from React Native, defaulting to 'light' mode if none is defined. 
 * If no color is specified in 'properties' for current theme, the function falls back to returning a color corresponding to the provided 'colorName' from the predefined 'colors' object for the current theme.
*/
export function useThemeColor(
    properties: {light?: string, dark?: string},
    colorName: keyof typeof colors.light & keyof typeof colors.dark
) {
    const theme = useColorScheme() ?? "light";
    const colorFromProps = properties[theme];
    
    if(colorFromProps) {
        return colorFromProps;
    }
    return colors[theme][colorName];
}

export function Text(properties: TextProperties) {
    const { style, lightColor, darkColor, ...otherProps } = properties;
    const color = useThemeColor({ light: lightColor, dark: darkColor }, "color");
    
    return <DefaultText style={[{ color }, style]} {...otherProps} />
}

export function View(properties: TextProperties) {
    const { style, lightColor, darkColor, ...otherProps } = properties;
    const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, "backgroundColor");
    
    return <DefaultView style={[{backgroundColor}, style]} {...otherProps}/>
}