import React, { forwardRef } from 'react'
import {
  Text as RNText,
  TouchableOpacity,
  TextProps as RNTextProps,
  TouchableOpacityProps,
  StyleProp,
  TextStyle,
} from 'react-native'
import Animated from 'react-native-reanimated'

interface TextProps extends RNTextProps {
  onClick?: () => void
  touchProps?: TouchableOpacityProps
  animated?: boolean
  style?: StyleProp<TextStyle>
  className?: string
}

const Text = forwardRef<RNText, TextProps>((props, ref) => {
  const { onClick, touchProps = {}, animated, style, className = '', children, ...reset } = props

  // Default style for dark theme - light text color
  const defaultStyle: TextStyle = {
    color: '#F5F5F5',
  }

  // Merge default style with provided style
  const mergedStyle = Array.isArray(style)
    ? [defaultStyle, ...style]
    : style
      ? { ...defaultStyle, ...(typeof style === 'object' ? style : {}) }
      : defaultStyle

  const textProps = {
    className,
    style: mergedStyle,
    ref,
    ...reset,
  }

  const handlePress = () => {
    onClick && onClick()
  }

  if (animated) {
    return <Animated.Text {...textProps}>{children}</Animated.Text>
  }
  if (onClick) {
    return (
      <TouchableOpacity activeOpacity={1} onPress={handlePress} {...touchProps}>
        <RNText {...textProps}>{children}</RNText>
      </TouchableOpacity>
    )
  }

  return <RNText {...textProps}>{children}</RNText>
})

Text.displayName = 'Text'
export default Text