import React from 'react'
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ViewStyle,
  StyleProp,
} from 'react-native'
import { Swipeable } from 'react-native-gesture-handler'

export interface SwipeToDeleteProps {
  children: React.ReactNode
  onDelete: () => void
  enabled?: boolean
  disabled?: boolean
  deleteText?: string
  style?: StyleProp<ViewStyle>
}

export function SwipeToDelete({
  children,
  onDelete,
  enabled = true,
  disabled = false,
  deleteText = '删除',
  style,
}: SwipeToDeleteProps) {
  const isDisabled = disabled || !enabled

  const renderRightActions = () => {
    return (
      <TouchableOpacity
        testID="swipe-delete-button"
        accessibilityRole="button"
        accessibilityLabel="删除"
        style={styles.deleteButton}
        onPress={() => {
          if (!isDisabled) {
            onDelete()
          }
        }}
        activeOpacity={0.8}
      >
        <Text style={styles.deleteText}>{deleteText}</Text>
      </TouchableOpacity>
    )
  }

  return (
    <Swipeable
      testID="swipe-container"
      renderRightActions={renderRightActions}
      enabled={!isDisabled}
      overshootRight={false}
      friction={2}
    >
      <View style={style}>{children}</View>
    </Swipeable>
  )
}

const styles = StyleSheet.create({
  deleteButton: {
    backgroundColor: '#FF3B30',
    width: 80,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 12,
    borderTopRightRadius: 16,
    borderBottomRightRadius: 16,
  },
  deleteText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
  },
})