import { Text, StyleSheet, View, Pressable, Button } from 'react-native';
import { useRef } from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
import Reanimated, { useAnimatedStyle } from 'react-native-reanimated';

function RightAction(prog, drag) {
  const styleAnimation = useAnimatedStyle(() => {
    console.log('showRightProgress:', prog.value);
    console.log('appliedTranslation:', drag.value);

    return {
      transform: [{ translateX: drag.value + 50 }],
    };
  });

  return (
    <Reanimated.View style={styleAnimation}>
      <Pressable
        onPress={() => {
          console.log('delete this item');
        }}
      >
        <Text style={styles.rightAction}>Icon</Text>
      </Pressable>
    </Reanimated.View>
  );
}

export default function Swiping() {
  const reanimatedRef = useRef();

  return (
    <GestureHandlerRootView>
      <View style={styles.container}>
        <ReanimatedSwipeable containerStyle={[styles.swipeable, {}]} friction={2} rightThreshold={40} dragOffsetFromRightEdge={40} renderRightActions={RightAction} ref={reanimatedRef}>
          <Text style={styles.txt}>Swipe me!</Text>
        </ReanimatedSwipeable>

        <Button
          onPress={() => {
            reanimatedRef.current.reset(); // no animation
            // reanimatedRef.current.close(); //runs animation
            //reanimatedRef.current!.openRight(); //runs animation
            //reanimatedRef.current!.openLeft(); //runs animation
          }}
          title="Close"
        />
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'stretch',
    justifyContent: 'center',
  },
  rightAction: {
    width: 50,
    height: 50,
    padding: 5,
    backgroundColor: 'gold',
    color: 'black',
  },
  separator: {
    width: '100%',
    borderTopWidth: 1,
  },
  txt: { color: 'white', paddingBlock: 10 },
  swipeable: {
    height: 50,
    backgroundColor: 'rebeccapurple',
    color: 'white',
    alignItems: 'center',
  },
});