import React, {useRef} from 'react';
import {
  Animated,
  StyleSheet,
  View,
  I18nManager,
  TouchableOpacity,
} from 'react-native';
import {Swipeable} from 'react-native-gesture-handler';

interface SwipeAction {
  comp: React.ReactNode;
  color?: string;
  width?: number;
  onPress?: () => void;
}

interface SwipeableComponentProps {
  children: React.ReactNode;
  leftSwipeEnabled?: boolean;
  rightSwipeEnabled?: boolean;
  leftActions?: SwipeAction[];
  rightActions?: SwipeAction[];
}

const SwipeableComponent: React.FC<SwipeableComponentProps> = ({
  children,
  leftSwipeEnabled = true,
  rightSwipeEnabled = true,
  leftActions = [],
  rightActions = [],
}) => {
  const swipeableRow = useRef<any>(null);

  const close = () => {
    // Add a small delay for better UX, like WhatsApp
    setTimeout(() => {
      swipeableRow.current?.close();
    }, 150);
  };

  const renderLeftActions = (
    progress: Animated.AnimatedInterpolation<number>,
  ) => {
    if (!leftSwipeEnabled || !leftActions?.length) return null;

    return (
      <View style={{flexDirection: 'row'}}>
        {leftActions.map((action, i) => {
          const baseWidth = action.width || 80;
          const offset = baseWidth * leftActions.length;
          const trans = progress.interpolate({
            inputRange: [0, 1],
            outputRange: [-offset, 0],
            extrapolate: 'clamp',
          });

          const scale = progress.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: [1, 1, 1],
            extrapolate: 'clamp',
          });

          const opacity = progress.interpolate({
            inputRange: [0, 0.3, 1],
            outputRange: [0, 0.75, 1],
            extrapolate: 'clamp',
          });

          return (
            <Animated.View
              key={`left-${i}`}
              style={{
                transform: [{translateX: trans}, {scale}],
                opacity,
              }}>
              <TouchableOpacity
                activeOpacity={0.7}
                style={[
                  styles.action,
                  {
                    backgroundColor: action.color || '#ccc',
                    width: baseWidth,
                    height: '100%',
                  },
                ]}
                onPress={() => {
                  action.onPress?.();
                  close();
                }}>
                {action.comp}
              </TouchableOpacity>
            </Animated.View>
          );
        })}
      </View>
    );
  };

  const renderRightActions = (
    progress: Animated.AnimatedInterpolation<number>,
  ) => {
    if (!rightSwipeEnabled || !rightActions?.length) return null;

    return (
      <View style={{flexDirection: 'row'}}>
        {rightActions.map((action, i) => {
          // make further actions translate more so they appear to come from farther right
          const baseWidth = action.width || 80;
          const offset = baseWidth * rightActions.length;

          const trans = progress.interpolate({
            inputRange: [0, 1],
            outputRange: [offset, 0],
            extrapolate: 'clamp',
          });

          // Slight scale easing for a nicer pop-in feel.
          const scale = progress.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: [1, 1, 1],
            extrapolate: 'clamp',
          });

          const opacity = progress.interpolate({
            inputRange: [0, 0.3, 1],
            outputRange: [0, 0.75, 1],
            extrapolate: 'clamp',
          });

          return (
            <Animated.View
              key={`right-${i}`}
              style={{
                transform: [{translateX: trans}, {scale}],
                opacity,
              }}>
              <TouchableOpacity
                activeOpacity={0.7}
                style={[
                  styles.action,
                  {
                    backgroundColor: action.color || '#ccc',
                    width: baseWidth,
                    height: '100%',
                  },
                ]}
                onPress={() => {
                  action.onPress?.();
                  close();
                }}>
                {action.comp}
              </TouchableOpacity>
            </Animated.View>
          );
        })}
      </View>
    );
  };

  return (
    <Swipeable
      ref={swipeableRow}
      friction={2}
      leftThreshold={15}
      rightThreshold={15}
      overshootLeft={true}
      overshootRight={true}
      overshootFriction={8}
      useNativeAnimations={true}
      renderLeftActions={leftSwipeEnabled ? renderLeftActions : undefined}
      renderRightActions={rightSwipeEnabled ? renderRightActions : undefined}>
      {children}
    </Swipeable>
  );
};

const styles = StyleSheet.create({
  action: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 0,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 3,
  },
});

export default SwipeableComponent;