import { View, Text, ScrollView, StyleSheet, Dimensions } from "react-native";
import React, { useState } from "react";
import Animated, {
  runOnJS,
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated";
import { PanGestureHandler } from "react-native-gesture-handler";

const { width } = Dimensions.get("window");

const DragDropTest = () => {
  const [leftItems, setLeftItems] = useState([
    "fortnite",
    "apex",
    "callofduty",
  ]);
  const [rightItems, setRightItems] = useState([]);

  const draggingItem = useSharedValue(null);
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const moveItem = (item) => {
    setLeftItems((items) => items.filter((i) => i !== item));
    setRightItems((items) => [...items, item]);
  };

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.startX = translateX.value;
      ctx.startY = translateY.value;
    },
    onActive: (event, ctx) => {
      translateX.value = ctx.startX + event.translationX;
      translateY.value = ctx.startY + event.translationY;
    },
    onEnd: () => {
      if (translateX.value > width / 2) {
        runOnJS(moveItem)(draggingItem.value);
      }
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
      draggingItem.value = null;
    },
  });

  const renderDraggable = (item) => {
    const style = useAnimatedStyle(() => ({
      transform: [
        { translateX: draggingItem.value === item ? translateX.value : 0 },
        { translateY: draggingItem.value === item ? translateY.value : 0 },
      ],
      zIndex: draggingItem.value === item ? 10 : 0,
    }));

    return (
      <PanGestureHandler
        key={item}
        onGestureEvent={gestureHandler}
        onHandlerStateChange={() => {
          draggingItem.value = item;
        }}
      >
        <Animated.View style={[styles.item, style]}>
          <Text style={styles.text}>{item}</Text>
        </Animated.View>
      </PanGestureHandler>
    );
  };

  return (
    <View style={styles.scrollWrapper}>
      <ScrollView
        style={{
          ...styles.scroll,
          zIndex: 2,
        }}
      >
        <Text style={styles.title}>Left</Text>
        {leftItems.map(renderDraggable)}
      </ScrollView>

      <ScrollView
        style={{
          ...styles.scroll,
          zIndex: -1,
        }}
      >
        <Text style={styles.title}>Right</Text>
        {rightItems.map((item) => (
          <View key={item} style={[styles.item, { backgroundColor: "#bdf" }]}>
            <Text style={styles.text}>{item}</Text>
          </View>
        ))}
      </ScrollView>
    </View>
  );
};

export default DragDropTest;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
  scrollWrapper: {
    flexDirection: "row",
    justifyContent: "space-around",
  },
  scroll: {
    width: width / 2.2,
    height: "90%",
    backgroundColor: "#f0f0f0",
    borderRadius: 10,
    margin: 5,
    padding: 10,
  },
  title: {
    fontWeight: "bold",
    fontSize: 16,
    marginBottom: 10,
  },
  item: {
    backgroundColor: "#aaf",
    padding: 15,
    marginVertical: 5,
    borderRadius: 10,
  },
  text: {
    color: "#333",
    textAlign: "center",
  },
});
