import { Stack } from '@servicetitan/design-system';
import { ChatMessageModelBase, formatChatMessageDate } from '@servicetitan/titan-chat-ui-common';
import { FC, useMemo } from 'react';
import { ChatMessage } from './chat-message';
import { ChatMessageTyping } from './chat-message-typing';

interface IChatMessagesProps {
    className?: string;
    messages: ChatMessageModelBase[];
    showTypingIndicator?: boolean;
}

export const ChatMessages: FC<IChatMessagesProps> = ({
    className,
    messages,
    showTypingIndicator,
}) => {
    // Split messages into chunks divided by participant name and message time (with 1 minute accuracy)
    const messagesChunks = useMemo(
        () =>
            messages.reduce((acc: ChatMessageModelBase[][][], message) => {
                if (!acc.length) {
                    acc.push([[message]]);
                    return acc;
                }
                const lastMessage = acc.at(-1)!.at(-1)!.at(-1)!;
                if (lastMessage.participant.name !== message.participant.name) {
                    acc.push([[message]]);
                } else if (
                    formatChatMessageDate(lastMessage.timestamp) !==
                    formatChatMessageDate(message.timestamp)
                ) {
                    acc.at(-1)!.push([message]);
                } else {
                    acc.at(-1)!.at(-1)!.push(message);
                }
                return acc;
            }, []),
        [messages]
    );

    return (
        <Stack direction="column" spacing="2" className={className} data-cy="titan-chat-messages">
            {messagesChunks
                .map(sameParticipantMessages => {
                    // Set omit avatar for all messages except the first one
                    const firstParticipantMessage = sameParticipantMessages[0][0];
                    return sameParticipantMessages.map(sameDateMessages => {
                        const lastTimestampMessage = sameDateMessages.at(-1)!;
                        return sameDateMessages.map(message => {
                            return (
                                <ChatMessage
                                    key={message.id}
                                    message={message}
                                    omitAvatar={message !== firstParticipantMessage}
                                    omitTimestamp={message !== lastTimestampMessage}
                                />
                            );
                        });
                    });
                })
                .flat(2)}
            {showTypingIndicator && <ChatMessageTyping />}
        </Stack>
    );
};