import React, { useEffect } from 'react';
import { eventEmitter, EventType } from '../../services/EventEmitter';
import {
    clearMessages,
    downloadFile,
    getDownloadFileStatus,
    getDownloadFileProgress,
    getMessages,
    loadMoreMessages,
    replyMessage,
    sendMessage,
} from '../../store/messages/messagesSlice';
import { IMessage } from '../../store/messages/types';
import { IPeer } from '../../store/peer/types';
import { StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native';
import { MessagesView } from './MessagesView';
import { BubbleProps, MessageTextProps, SendProps, TimeProps } from 'react-native-gifted-chat'
import { useAppDispatch, useAppSelector } from '../../store/hooks';

export interface IProps {
    conversation: IPeer;
    messages: IMessage[];
    style?: ViewStyle;
    alwaysShowSend?: boolean;
    onMessageLongPressed?: (context: any, message: IMessage) => void;
    renderSendingExtraView?: () => React.ReactNode;
    renderMessageCustomView?: (currentMessage: IMessage) => React.ReactNode;
    renderSystemMessage?: (currentMessage: IMessage) => React.ReactNode;
    renderMessageImage?: (currentMessage: IMessage) => React.ReactNode;
    renderChatActions?: () => React.ReactNode;
    renderAvatar?: (currentMessage: IMessage) => React.ReactNode;
    onSend?: (message: IMessage) => void;
    onInputTextChanged?: (text: string) => void;
    renderSendButton?: (sendProps: SendProps<IMessage>) => React.ReactNode;
    renderMessageText?: (messageText: MessageTextProps<IMessage>) => React.ReactNode;
    dateCustomStyle?: StyleProp<TextStyle>;
    renderCustomTime?: (timeProps: TimeProps<IMessage>) => React.ReactNode;
    renderBubbleContainer?: (bubbleProps: BubbleProps<IMessage>) => React.ReactNode;
}
/**
 * @module
 * @name Messages
 * @public
 * @description This guide explains how to retrieve messages from a conversation (P2P or Bubble) and how to send new ones.
 * <br><br>
 */
export const MessagesContainer: React.FunctionComponent<IProps> = (props: IProps) => {
    const dispatch = useAppDispatch();
    const loading = useAppSelector((state) => state.messages.loading);
    useEffect(() => {
        dispatch(getMessages(props.conversation.jId));

        const onFileDownloadProgressUpdated = eventEmitter.addListener(
            EventType.FileDownloadProgressUpdated,
            (eventData: number) => {
                dispatch(getDownloadFileProgress(eventData))
            }
        );

        const onFileDownloadFinished = eventEmitter.addListener(
            EventType.FileDownloadFinished,
            (eventData: string) => {
                dispatch(getDownloadFileStatus(eventData));
            }
        );

        const onThumpnailUpdated = eventEmitter.addListener(EventType.ThumpnailUpdated, () => {
            dispatch(loadMoreMessages());
        });

        return () => {
            dispatch(clearMessages());
            onFileDownloadProgressUpdated.remove();
            onFileDownloadFinished.remove();
            onThumpnailUpdated.remove();
        };
    }, []);
const onLoadMore = () => {
    dispatch(loadMoreMessages());
}
const onSendMessage = (message: IMessage, urgency: string, attachedFileUri: string[]) =>{
    dispatch(sendMessage({message, urgency, attachedFileUri}));
}
const onFileDownload = (fileDescriptorId: string)=> {
    dispatch(downloadFile(fileDescriptorId));
}
const onReplayMessage = (message:IMessage) => {
dispatch(replyMessage(message))
}
    return (
        <View style={{ ...styles.container, ...props.style }}>
            <MessagesView
                messages={props.messages}
                loading={loading}
                alwaysShowSend={props.alwaysShowSend}
                loadMore={onLoadMore}
                sendMessage={onSendMessage}
                downloadFile={onFileDownload}
                replyMessage={onReplayMessage}
                onMessageLongPressed={props.onMessageLongPressed}
                renderChatActions={props.renderChatActions}
                renderSendingExtraView={props.renderSendingExtraView}
                renderMessageCustomView={props.renderMessageCustomView}
                renderSystemMessage={props.renderSystemMessage}
                renderMessageImage={props.renderMessageImage}
                renderAvatar={props.renderAvatar}
                onSend={props.onSend}
                onInputTextChanged={props.onInputTextChanged}
                renderSendButton={props.renderSendButton}
                renderMessageText={props.renderMessageText}
                dateCustomStyle={props.dateCustomStyle}
                renderCustomTime={props.renderCustomTime}
                renderCustomMessageContainer={props.renderBubbleContainer}
            />
        </View>

    )
};
const styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: '#ffffff', height: 'auto', }
});