import { BodyText, Icon, Stack } from '@servicetitan/design-system';
import { ChatMessageModelFile, ChatMessageState } from '@servicetitan/titan-chat-ui-common';
import { observer } from 'mobx-react';
import { FC, Fragment } from 'react';

interface IMessageContentFileProps {
    message: ChatMessageModelFile;
}

export const MessageContentFile: FC<IMessageContentFileProps> = observer(({ message }) => {
    const isDelivering = message.state === ChatMessageState.Delivering;
    const isDelivered = message.state === ChatMessageState.Delivered;
    const isFailed = message.state === ChatMessageState.Failed;

    return (
        <Fragment>
            <Stack direction="row" spacing="1" alignItems="center">
                <Icon name="attach_file" />
                <span>{message.fileName}</span>
            </Stack>
            {isFailed && (
                <BodyText el="div" size="small" className="ta-right c-red-500">
                    File upload failed: {message.error ?? 'Unknown error'}
                </BodyText>
            )}
            {(isDelivering || isDelivered) && (
                <BodyText el="div" size="small" className="ta-right" subdued>
                    {isDelivered ? 'File uploaded' : 'Please wait while uploading...'}
                </BodyText>
            )}
        </Fragment>
    );
});