import { Stack } from '@servicetitan/design-system';
import { useDependencies } from '@servicetitan/react-ioc';
import { CHAT_UI_STORE_TOKEN, ChatCustomizations } from '@servicetitan/titan-chat-ui-common';
import { observer } from 'mobx-react';
import { FC, Fragment, useEffect, useRef } from 'react';
import { ChatConnecting } from './chat-connecting';
import { ChatInput } from './chat-input';
import { ChatInputFile } from './chat-input-file';
import { ChatMessages } from './chat-messages';
import { ChatNotifications } from './chat-notifications';

export interface IChatProps {
    className?: string;
    customizations?: ChatCustomizations;
}

export const Chat: FC<IChatProps> = observer(({ className, customizations }) => {
    const scrollRef = useRef<HTMLDivElement>(null);
    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);

    const footerComponent = customizations?.footerComponent;
    const loadingComponent = customizations?.loadingComponent;

    useEffect(() => {
        chatUiStore.setCustomizationContext(customizations);
    }, [chatUiStore, customizations]);

    useEffect(() => {
        setTimeout(() => {
            if (scrollRef.current) {
                scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
            }
        }, 0);
    }, [chatUiStore.scrollCounter]);

    return (
        <Stack direction="column" className={className} data-cy="titan-chat">
            {chatUiStore.isStarting ? (
                (loadingComponent ?? <ChatConnecting className="p-x-3 p-y-2" />)
            ) : (
                <Fragment>
                    <div ref={scrollRef} className="p-x-3 p-y-2 flex-grow-1 of-y-auto">
                        <ChatMessages
                            messages={chatUiStore.messages}
                            showTypingIndicator={chatUiStore.isAgentTyping}
                        />
                    </div>
                    <ChatNotifications />
                    {!customizations?.input?.isDisabled && (
                        <Stack className="p-x-3 p-y-2" direction="column" spacing="2">
                            <ChatInputFile className="p-2 box-sizing-border-box border-radius-1 border border-style-dashed" />
                            <ChatInput />
                            {Boolean(footerComponent) && footerComponent}
                        </Stack>
                    )}
                </Fragment>
            )}
        </Stack>
    );
});