import React, { useRef } from 'react';
import { Animated, Text, View } from 'react-native';
import BaseSwipeable from 'react-native-gesture-handler/Swipeable';
import { RectButton } from 'react-native-gesture-handler';
import styles from './styles';

const Swipeable = ({ children, leftActions, rightActions, style, enabled = true }) => {
  const swipeableRef = useRef();

  const renderAction = (text, color, icon, onPress, x, progress, testID) => {
    const trans = progress.interpolate({
      inputRange: [0, 1],
      outputRange: [x, 0],
    });

    const close = () => {
      swipeableRef.current?.close();
    };

    const pressHandler = () => {
      close();
      onPress();
    };

    return (
      <Animated.View style={[{ flex: 1, transform: [{ translateX: trans }] }]}>
        <RectButton
          style={[styles.rightAction, { backgroundColor: color, paddingVertical: 4 }]}
          onPress={pressHandler}
        >
          <View
            style={{
              flex: 1,
              alignItems: 'center',
              justifyContent: 'space-around',
              flexDirection: 'column',
            }}
            testID={testID}
          >
            {icon?.()}
            <Text style={styles.actionText}>{text}</Text>
          </View>
        </RectButton>
      </Animated.View>
    );
  };

  const renderLeftActions = (progress) => (
    <View
      style={{
        width: 80 * leftActions.length + 10,
        flexDirection: 'row',
        paddingRight: 10,
      }}
    >
      {leftActions.map((action, i) =>
        renderAction(
          action.title,
          action.color,
          action.icon,
          action.onPress,
          -(80 * leftActions.length + i),
          progress,
          action.testID
        )
      )}
    </View>
  );

  const renderRightActions = (progress) => (
    <View
      style={{
        width: 80 * rightActions.length,
        flexDirection: 'row',
      }}
    >
      {rightActions.map((action, i) =>
        renderAction(
          action.title,
          action.color,
          action.icon,
          action.onPress,
          80 * (rightActions.length - i),
          progress,
          action.testID
        )
      )}
    </View>
  );

  const updateRef = (ref) => {
    swipeableRef.current = ref;
  };

  return (
    <BaseSwipeable
      enabled={enabled}
      ref={updateRef}
      containerStyle={style}
      friction={2}
      enableTrackpadTwoFingerGesture
      rightThreshold={40}
      renderLeftActions={leftActions && leftActions.length && renderLeftActions}
      renderRightActions={rightActions && rightActions.length && renderRightActions}
      shouldCancelWhenOutside={false}
    >
      {children}
    </BaseSwipeable>
  );
};

export default Swipeable;
