import React from 'react';
import { Text, StyleSheet, View, TouchableOpacity } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Colors } from 'src/theme';
import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
import { CustomMessage } from '../types';

type ReplyMessageBarProps = {
  clearReply: () => void;
  clearEditMessage: () => void;
  message: CustomMessage | null;
  editingMessage: CustomMessage | null;
};

const replyMessageBarHeight = 50;

const ReplyMessageBar = ({
  clearReply,
  clearEditMessage,
  message,
  editingMessage
}: ReplyMessageBarProps) => {
  if (!message && !editingMessage) return null;

  let text = editingMessage ? editingMessage.text : message?.text;

  if (!editingMessage && message?.attachment && message?.attachment?.filename) {
    text = message.attachment.filename;
  }

  if (!editingMessage && message?.image) {
    text = '🏞️photo';
  }

  if (!editingMessage && message?.video) {
    text = '📽️video';
  }

  if (
    !editingMessage &&
    message?.attachment &&
    message?.attachment?.filetype === 'nomadmania/location'
  ) {
    text = '📍location';
  }

  return (
    <Animated.View
      entering={FadeInDown}
      exiting={FadeOutDown}
      style={{
        height: 50,
        flexDirection: 'row',
        backgroundColor: Colors.FILL_LIGHT
      }}
    >
      <View
        style={{
          height: 50,
          width: 6,
          backgroundColor: Colors.ORANGE
        }}
      ></View>
      <View style={styles.replyImageContainer}>
        <MaterialCommunityIcons
          name={editingMessage ? 'pencil' : 'reply'}
          size={20}
          color={Colors.DARK_BLUE}
        />
      </View>

      <View style={{ flex: 1 }}>
        <Text
          style={{
            color: Colors.DARK_BLUE,
            fontWeight: '600',
            paddingLeft: 10,
            paddingTop: 5,
            fontSize: 15
          }}
        >
          {editingMessage ? 'Edit message' : message?.user.name}
        </Text>
        <Text style={{ color: Colors.DARK_BLUE, paddingLeft: 10, paddingTop: 5 }} numberOfLines={1}>
          {text}
        </Text>
      </View>

      <View style={{ alignItems: 'flex-end', justifyContent: 'center' }}>
        <TouchableOpacity
          style={styles.crossButton}
          onPress={editingMessage ? clearEditMessage : clearReply}
        >
          <MaterialCommunityIcons name="close-circle-outline" size={24} color={Colors.DARK_BLUE} />
        </TouchableOpacity>
      </View>
    </Animated.View>
  );
};

export default ReplyMessageBar;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderBottomColor: 'lightgrey',
    height: replyMessageBarHeight
  },
  replyImage: {
    width: 20,
    height: 20
  },
  replyImageContainer: {
    paddingLeft: 8,
    height: '100%',
    justifyContent: 'center'
  },
  crossButtonIcon: {
    width: 24,
    height: 24
  },
  crossButton: {
    padding: 4,
    paddingRight: 10
  },
  messageContainer: {
    flex: 1
  }
});
