/**

 * Copyright (c) 2024 Huawei Technologies Co., Ltd.

 *

 * This source code is licensed under the MIT license found in the

 * LICENSE-MIT file in the root directory of this source tree.

 */



import React, { useRef, useEffect } from 'react';

import { View, PanResponder, Animated, Text, ScrollView } from 'react-native';



export function CursorExample() {

  const pan = useRef(new Animated.ValueXY()).current;



  const panResponder = useRef(

    PanResponder.create({

      onStartShouldSetPanResponder: () => true,

      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }]),

      onPanResponderRelease: () => {

        Animated.timing(pan, {

          toValue: { x: 0, y: 0 },

          useNativeDriver: true,

        }).start();

      },

    }),

  ).current;



  useEffect(() => {

    pan.setOffset({ x: 0, y: 0 });

    pan.setValue({ x: 0, y: 0 });

  }, []);



  return (

    <View style={{ flex: 1 }}>

      <ScrollView style={{ height: 600 }}>

        <View style={{ height: 500, width: '100%', backgroundColor: 'silver' }} />

        <View style={{ height: 500, width: '100%', backgroundColor: 'gray' }} />

      </ScrollView>

      <Animated.View

        {...panResponder.panHandlers}

        style={[

          { transform: pan.getTranslateTransform() },

          { width: 50, height: 50, backgroundColor: 'red', position: 'absolute' },

        ]}>

        <Text style={{ width: '100%', height: '100%' }}>Drag me around</Text>

      </Animated.View>

    </View>

  );

}