import React from 'react';
import { TouchableOpacity, Text, StyleSheet, Dimensions } from 'react-native';
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Colors } from 'src/theme';

interface MessagePosition {
  x: number;
  y: number;
  isMine: boolean;
  width: number;
  height: number;
}

interface OptionsMenuProps {
  messagePosition: MessagePosition | null;
  selectedMessage: any;
  handleOptionPress: (option: string) => void;
}

const OptionsMenu: React.FC<OptionsMenuProps> = ({
  messagePosition,
  selectedMessage,
  handleOptionPress
}) =>
  selectedMessage &&
  messagePosition && (
    <Animated.View
      entering={FadeIn}
      exiting={FadeOut}
      style={[
        styles.optionsMenu,
        {
          top: messagePosition.y + messagePosition.height + 8,
          left: messagePosition.isMine
            ? Dimensions.get('window').width - Dimensions.get('window').width * 0.75 - 8
            : messagePosition.x
        }
      ]}
    >
      <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('reply')}>
        <Text style={styles.optionText}>Reply</Text>
        <MaterialCommunityIcons name="reply" size={20} color={Colors.DARK_BLUE} />
      </TouchableOpacity>
      <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('copy')}>
        <Text style={styles.optionText}>Copy</Text>
        <MaterialCommunityIcons name="content-copy" size={20} color={Colors.DARK_BLUE} />
      </TouchableOpacity>
      <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('delete')}>
        <Text style={styles.optionText}>Delete</Text>
        <MaterialCommunityIcons name="delete" size={20} color={Colors.DARK_BLUE} />
      </TouchableOpacity>
      {/* <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('pin')}>
        <Text style={styles.optionText}>Pin message</Text>
        <MaterialCommunityIcons name="pin" size={20} color={Colors.DARK_BLUE} />
      </TouchableOpacity> */}
    </Animated.View>
  );

const styles = StyleSheet.create({
  optionsMenu: {
    position: 'absolute',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderRadius: 10,
    padding: 8,
    shadowColor: '#000',
    shadowOpacity: 0.3,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 5,
    elevation: 5,
    width: Dimensions.get('window').width * 0.75
  },
  optionButton: {
    paddingVertical: 10,
    paddingHorizontal: 12,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  optionText: {
    fontSize: 16
  }
});

export default OptionsMenu;