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';
import PinIcon from 'assets/icons/messages/pin.svg';

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

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

const OptionsMenu: React.FC<OptionsMenuProps> = ({
  messagePosition,
  selectedMessage,
  handleOptionPress,
  isGroup,
  isAdmin,
  isAnnouncement
}) =>
  selectedMessage &&
  messagePosition && (
    <Animated.View
      entering={FadeIn}
      exiting={FadeOut}
      style={[
        styles.optionsMenu,
        {
          alignSelf: messagePosition.isMine ? 'flex-end' : 'flex-start'
        }
      ]}
    >
      <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('reply')}>
        <Text style={styles.optionText}>Reply</Text>
        <MaterialCommunityIcons name="reply" size={20} color={Colors.DARK_BLUE} />
      </TouchableOpacity>

      {selectedMessage.currentMessage?.image || selectedMessage.currentMessage?.video ? (
        <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('download')}>
          <Text style={styles.optionText}>
            {selectedMessage.currentMessage?.image ? 'Download image' : 'Download video'}
          </Text>
          <MaterialCommunityIcons name="download" size={20} color={Colors.DARK_BLUE} />
        </TouchableOpacity>
      ) : null}

      <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('copy')}>
        <Text style={styles.optionText}>Copy</Text>
        <MaterialCommunityIcons name="content-copy" size={20} color={Colors.DARK_BLUE} />
      </TouchableOpacity>

      {!isGroup || (isGroup && messagePosition.isMine) || (isAnnouncement && isAdmin) ? (
        <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('delete')}>
          <Text style={styles.optionText}>Delete</Text>
          <MaterialCommunityIcons name="delete" size={20} color={Colors.DARK_BLUE} />
        </TouchableOpacity>
      ) : null}

      {(isGroup && messagePosition.isMine) || (isAnnouncement && isAdmin) ? (
        <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('info')}>
          <Text style={styles.optionText}>Info</Text>
          <MaterialCommunityIcons name="information-outline" size={20} color={Colors.DARK_BLUE} />
        </TouchableOpacity>
      ) : null}
      {isGroup && isAdmin ? (
        <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('pin')}>
          <Text style={styles.optionText}>Pin</Text>
          <PinIcon height={16} fill={Colors.DARK_BLUE} />
        </TouchableOpacity>
      ) : null}

      {messagePosition.isMine || (isAnnouncement && isAdmin) ? (
        <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('edit')}>
          <Text style={styles.optionText}>Edit</Text>
          <MaterialCommunityIcons name="pencil" size={20} color={Colors.DARK_BLUE} />
        </TouchableOpacity>
      ) : null}
    </Animated.View>
  );

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

export default OptionsMenu;
