import React from 'react';
import type { TextProps as RNTextProps } from 'react-native';
import { StyleSheet, TextInput } from 'react-native';
import Animated, { useAnimatedProps } from 'react-native-reanimated';
import useDefaultStyles from './Colors';

const styles = StyleSheet.create({
    baseStyle: {
        color: 'black',
    },
});
Animated.addWhitelistedNativeProps({ text: true });

interface TextProps {
    text: Animated.SharedValue<string>;
    style?: Animated.AnimateProps<RNTextProps>['style'];
}

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

const ReText = (props: TextProps) => {
    const { text, style } = { style: {}, ...props };
    const defaultStyles = useDefaultStyles();

    const animatedProps = useAnimatedProps(() => {
        return {
            text: text.value,
            // Here we use any because the text prop is not available in the type
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
        } as any;
    });
    
    return (
        <AnimatedTextInput
            underlineColorAndroid="transparent"
            editable={false}
            value={text.value}
            style={[styles.baseStyle, defaultStyles.text, style]}
            {...{ animatedProps }}
        />
    );
};

export default ReText;