import { Button, Eyebrow } from '@servicetitan/design-system';
import { useDependencies } from '@servicetitan/react-ioc';
import {
    CHAT_UI_STORE_TOKEN,
    ChatMessageState,
    IChatMessageProps,
} from '@servicetitan/titan-chat-ui-common';
import { observer } from 'mobx-react';
import { FC, PropsWithChildren, useCallback } from 'react';
import { MessageFooter } from '../messages/message-footer';
import { MessageUser } from '../messages/message-user';

export const ChatMessageTemplateUser: FC<PropsWithChildren<IChatMessageProps>> = observer(
    ({ children, message, omitTimestamp }) => {
        const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
        const isError = message.state === ChatMessageState.Failed;

        const handleRetry = useCallback(
            () => chatUiStore.sendMessageRetry(message),
            [chatUiStore, message]
        );

        return (
            <MessageUser
                isError={isError}
                messageFooter={
                    isError ? (
                        <Eyebrow className="c-red-600" data-cy="titan-chat-message-error">
                            Message not delivered. Retry
                            <Button
                                iconName="refresh"
                                fill="subtle"
                                size="xsmall"
                                negative
                                aria-label="Retry send message"
                                onClick={handleRetry}
                                data-cy="titan-chat-message-error-retry"
                            />
                        </Eyebrow>
                    ) : !omitTimestamp ? (
                        <MessageFooter timestamp={message.timestamp} />
                    ) : null
                }
            >
                {children}
            </MessageUser>
        );
    }
);