import React, { useRef } from "react";
import { View, Text, Image, Animated, PanResponder } from "react-native";

import { Fonts, Palette, Style } from "../styles";
import { icons } from "../assets";

const SlideToUnlock = ({ onUnlock, containerStyle = {} }) => {
  const { width = 0 } = containerStyle;
  const triggerPoint = width * 0.8; // Modification de la valeur du triggerPoint

  const slideAnim = useRef(new Animated.Value(0)).current;

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (e, gestureState) => {
        if (gestureState.dx > 0 && gestureState.dx < triggerPoint) {
          slideAnim.setValue(gestureState.dx);
        }
      },
      onPanResponderRelease: (e, gestureState) => {
        if (gestureState.dx > triggerPoint) {
          // Modification de la condition
          Animated.spring(slideAnim, {
            toValue: 0,
            useNativeDriver: false,
            onComplete: () => onUnlock(),
          }).start();
        } else {
          Animated.spring(slideAnim, {
            toValue: 0,
            useNativeDriver: false,
          }).start();
        }
      },
    })
  ).current;

  return (
    <View style={{ ...styles.container, ...containerStyle }}>
      <Text style={styles.text}>Slidez pour confirmer</Text>
      <Animated.View
        {...panResponder.panHandlers}
        style={[
          Style.containerCenter,
          styles.slider,
          {
            transform: [{ translateX: slideAnim }],
          },
        ]}
      >
        <Image
          source={icons.arrowRight}
          style={[
            Style.iconDefault,
            { tintColor: Palette.darkRadioactivGreen },
          ]}
        />
      </Animated.View>
    </View>
  );
};

const styles = {
  container: {
    height: 50,
    backgroundColor: Palette.transparentRadioactivGreen,
    borderRadius: 50,
    borderWidth: 2,
    borderStyle: "solid",
    borderColor: Palette.radioactivGreen,
    overflow: "hidden",
    alignItems: "center",
    justifyContent: "center",
  },
  slider: {
    position: "absolute",
    left: 3,
    top: 3,
    width: 40,
    height: 40,
    backgroundColor: Palette.radioactivGreen,
    borderRadius: 25,
  },
  text: {
    position: "absolute",
    ...Fonts({
      color: "white",
      style: {
        fontWeight: "bold",
      },
    }),
  },
};

export default SlideToUnlock;