import { IChatMessageProps, getFirstName } from '@servicetitan/titan-chat-ui-common';
import { observer } from 'mobx-react';
import { FC, PropsWithChildren, useMemo } from 'react';
import { MessageAgent } from '../messages/message-agent';
import { MessageFooter } from '../messages/message-footer';
import { useAvatarProps } from '../messages/use-avatar-props';

export const ChatMessageTemplateAgent: FC<PropsWithChildren<IChatMessageProps>> = observer(
    ({ children, message, omitAvatar, omitTimestamp }) => {
        const {
            participant: { icon, name },
        } = message;
        const firstName = useMemo(() => getFirstName(name), [name]);
        const avatarProps = useAvatarProps(name, icon);
        return (
            <MessageAgent
                avatar={avatarProps}
                omitAvatar={omitAvatar}
                messageFooter={
                    !omitTimestamp ? (
                        <MessageFooter name={firstName} timestamp={message.timestamp} />
                    ) : undefined
                }
            >
                {children}
            </MessageAgent>
        );
    }
);