import { Banner, Button } from '@servicetitan/design-system';
import { useDependencies } from '@servicetitan/react-ioc';
import { CHAT_UI_STORE_TOKEN } from '@servicetitan/titan-chat-ui-common';
import { observer } from 'mobx-react';
import { FC, useCallback } from 'react';
import { MultilineText } from '../common/multiline-text';

export const ChatError: FC<{ className?: string }> = observer(({ className }) => {
    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
    const { error } = chatUiStore;

    const handleReconnect = useCallback(async () => {
        await chatUiStore.recover();
    }, [chatUiStore]);

    if (!error) {
        return null;
    }
    return (
        <Banner
            status="critical"
            title={error.title}
            icon
            className={className}
            data-cy="titan-chat-error"
        >
            <MultilineText text={error.message} data-cy="titan-chat-error-text" />
            {error.recoverStrategy && (
                <Button
                    className="m-t-2 bg-white-i"
                    small
                    onClick={handleReconnect}
                    data-cy="titan-chat-error-recover"
                >
                    {error.recoverStrategy.recoverButtonTitle}
                </Button>
            )}
        </Banner>
    );
});