import classNames from 'classnames';
import { observer } from 'mobx-react';
import { Link, Text } from '@servicetitan/anvil2';

import { ChatComposerRich } from '../chat-composer-rich';

import * as styles from './footer.module.less';

export interface FooterProps {
    isLoading?: boolean;
    message: string;
    placeholder?: string;
    onMessageChange: (value: string) => void;
    onSubmit: () => void;
    className?: string;
    messageInputId?: string;
    sendIconId?: string;
    learnMoreLinkId?: string;
    /** Callback when upload file is selected from menu */
    onUploadFile?: () => void;
    /** Callback when dictate message is selected from menu */
    onDictateMessage?: () => void;
}

export const Footer = observer(
    ({
        isLoading = false,
        placeholder = 'Ask Atlas',
        message,
        onMessageChange,
        onSubmit,
        className,
        messageInputId,
        sendIconId,
        learnMoreLinkId,
        onUploadFile,
        onDictateMessage,
    }: FooterProps) => {
        const handleSubmit = () => {
            if (!isLoading) {
                onSubmit();
            }
        };

        return (
            <div className={classNames(styles.chatFooter, className)}>
                <ChatComposerRich
                    messageInputId={messageInputId}
                    sendIconId={sendIconId}
                    placeholder={placeholder}
                    onSend={handleSubmit}
                    onChange={onMessageChange}
                    message={message}
                    onUploadFile={onUploadFile}
                    onDictateMessage={onDictateMessage}
                />
                <Text
                    subdued
                    variant="body"
                    size="small"
                    className="fs-label-small m-block-start-1"
                >
                    Atlas is TI-powered, subject to our privacy policy.{' '}
                    <Link id={learnMoreLinkId} target="_blank" href="#" appearance="secondary">
                        <Text inline size="small" subdued className="fs-label-small">
                            Learn more
                        </Text>
                    </Link>
                </Text>
            </div>
        );
    }
);