import React, { forwardRef } from 'react'
import { View, TouchableOpacity, ViewStyle, Pressable } 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}
        onPress={handlePress}
        onLongPress={onLongPress}
      >
        <View className={className} {...reset} ref={ref}>
          {children}
        </View>
      </TouchableOpacity>
    )
  } else if (onClick || onLongPress) {
    return (
      <Pressable onPress={handlePress} onLongPress={onLongPress} {...touchProps}>
        <View className={className} {...reset} ref={ref}>
          {children}
        </View>
      </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
