import { Stack } from '@servicetitan/design-system';
import classNames from 'classnames';
import { FC, PropsWithChildren, ReactNode } from 'react';
import * as Styles from './message-agent.module.less';
import { IMessageAvatarProps, MessageAvatar } from './message-avatar';

export interface IMessageAgentProps {
    avatar?: IMessageAvatarProps;
    messageFooter?: ReactNode;
    isError?: boolean;
    fullWidth?: boolean;
    subtle?: boolean;
    omitAvatar?: boolean;
    className?: string;
    ['data-cy']?: string;
}

export const MessageAgent: FC<PropsWithChildren<IMessageAgentProps>> = ({
    avatar,
    children,
    className,
    fullWidth,
    isError,
    messageFooter,
    omitAvatar,
    subtle,
    ...rest
}) => {
    const dataCy = rest['data-cy'] ?? 'titan-chat-message-agent';
    return (
        <div
            className={classNames(
                Styles.messageRoot,
                {
                    [Styles.fullWidth]: Boolean(fullWidth),
                },
                className
            )}
            data-cy2="titan-chat-message"
            data-cy={dataCy}
        >
            <div className={Styles.messageAvatar}>
                {!omitAvatar && avatar ? <MessageAvatar {...avatar} /> : <div />}
            </div>
            <Stack
                direction="column"
                spacing="1"
                className={classNames(Styles.messageContent)}
                data-cy="titan-chat-message-content"
                data-cy2="titan-chat-message-content-agent"
            >
                {subtle ? (
                    children
                ) : (
                    <div
                        className={classNames(Styles.messageBubble, {
                            [Styles.error]: Boolean(isError),
                        })}
                    >
                        {children}
                    </div>
                )}
                {Boolean(messageFooter) && (
                    <div data-cy="titan-chat-message-footer">{messageFooter}</div>
                )}
            </Stack>
        </div>
    );
};