// forked from https://github.com/wcandillon/react-native-redash/blob/master/src/ReText.tsx

import React from 'react';
import { StyleSheet, TextProps as RNTextProps } from 'react-native';
import { TextInput } from 'react-native';
import Animated, {
  useAnimatedProps,
} from 'react-native-reanimated';
import type { SharedValue, AnimatedProps } from 'react-native-reanimated';
Animated.addWhitelistedUIProps({ text: true });

interface AnimatedTextProps {
  text: SharedValue<string>;
  style?: AnimatedProps<RNTextProps>['style'];
}

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

export const AnimatedText = ({ text, style }: AnimatedTextProps) => {
  const animatedProps = useAnimatedProps(() => ({
    text: text.value,
  })) as Partial<React.ComponentProps<typeof TextInput>>;
  return (
    <AnimatedTextInput
      underlineColorAndroid="transparent"
      editable={false}
      style={[styles.text, style]}
      animatedProps={animatedProps}
    />
  );
};

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