import React, { forwardRef } from 'react'
import { Pressable, TouchableOpacity, View, type ViewStyle } from 'react-native'
import Animated from 'react-native-reanimated'

const AnimatedView = Animated.createAnimatedComponent(View)

interface BlockProps {
  onClick?: () => void
  onLongPress?: () => void
  animated?: boolean
  style?: ViewStyle
  children?: React.ReactNode
  opacity?: number
  touchProps?: any
  className?: string
}

const Block = forwardRef<View, BlockProps>((props, ref) => {
  const { onClick = null, onLongPress, animated, children, opacity, touchProps, className = '', ...reset } = props

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

  if ((onClick || onLongPress) && opacity) {
    return (
      <TouchableOpacity
        activeOpacity={opacity || 0.85}
        className={className}
        onLongPress={onLongPress}
        onPress={handlePress}
        {...reset}
        {...touchProps}
        ref={ref as any}
      >
        {children}
      </TouchableOpacity>
    )
  } else if (onClick || onLongPress) {
    return (
      <Pressable
        className={className}
        onLongPress={onLongPress}
        onPress={handlePress}
        {...reset}
        {...touchProps}
        ref={ref as any}
      >
        {children}
      </Pressable>
    )
  } else if (animated) {
    return (
      <AnimatedView className={className} {...reset} ref={ref}>
        {children}
      </AnimatedView>
    )
  } else {
    return (
      <View className={className} {...reset} ref={ref}>
        {children}
      </View>
    )
  }
})

// 添加displayName以便在React DevTools中显示组件名称
Block.displayName = 'Block'
export default Block