import { Banner, BodyText, Link } 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 * as Styles from './chat-timer.module.less';

export const ChatTimer: FC = observer(() => {
    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
    const secondsLeft = chatUiStore.timer?.secondsLeft ?? 0;

    const restartTimers = useCallback(() => chatUiStore.restartTimers(), [chatUiStore]);

    if (!chatUiStore.timer) {
        return null;
    }
    return (
        <Banner
            status="info"
            title="Chat inactive"
            icon
            className={Styles.banner}
            data-cy="titan-chat-timer"
        >
            <BodyText el="p">
                {'Are you still there? Please respond within '}
                <b>{secondsLeft}s</b>
                {' or this chat will time out.'}
            </BodyText>
            <Link onClick={restartTimers} subdued data-cy="titan-chat-timer-restart">
                I'm here
            </Link>
        </Banner>
    );
});