// src/ui/GestureHandler.tsx

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import {
  TapGestureHandler,
  PinchGestureHandler,
  PanGestureHandler,
  State,
} from 'react-native-gesture-handler';

interface GestureHandlerProps {
  onTap?: () => void;
  onPinch?: (scale: number) => void;
  onPan?: (translationX: number, translationY: number) => void;
  children: React.ReactNode;
}

export default function GestureHandler({
  onTap,
  onPinch,
  onPan,
  children,
}: GestureHandlerProps) {
  const handleTapStateChange = (event: any) => {
    if (event.nativeEvent.state === State.ACTIVE && onTap) {
      onTap();
    }
  };

  const handlePinchStateChange = (event: any) => {
    if (event.nativeEvent.state === State.ACTIVE && onPinch) {
      onPinch(event.nativeEvent.scale);
    }
  };

  const handlePanStateChange = (event: any) => {
    if (event.nativeEvent.state === State.ACTIVE && onPan) {
      onPan(event.nativeEvent.translationX, event.nativeEvent.translationY);
    }
  };

  return (
    <PanGestureHandler onHandlerStateChange={handlePanStateChange}>
      <PinchGestureHandler onHandlerStateChange={handlePinchStateChange}>
        <TapGestureHandler onHandlerStateChange={handleTapStateChange}>
          <View style={styles.container}>
            {children}
            <View style={styles.overlay}>
              <Text style={styles.overlayText}>Gesture Overlay</Text>
            </View>
          </View>
        </TapGestureHandler>
      </PinchGestureHandler>
    </PanGestureHandler>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  overlay: {
    position: 'absolute',
    top: 20,
    left: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    padding: 10,
    borderRadius: 8,
  },
  overlayText: {
    color: '#fff',
    fontSize: 16,
  },
});