import { Eyebrow, FilePicker, Stack } from '@servicetitan/design-system';
import { useDependencies } from '@servicetitan/react-ioc';
import { CHAT_UI_STORE_TOKEN, FileDescriptor } from '@servicetitan/titan-chat-ui-common';
import { observer } from 'mobx-react';
import { FC, useCallback } from 'react';

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

    const handleSelected = useCallback(
        (newAttachments: FileList) => {
            const fileDescriptor: FileDescriptor = {
                file: newAttachments[0],
                displayName: newAttachments[0].name,
            };
            chatUiStore.setFile(fileDescriptor);
        },
        [chatUiStore]
    );

    const handleReplace = useCallback(
        ({ newFile }: { file: FileDescriptor; newFile: File }) => {
            const fileDescriptor: FileDescriptor = {
                file: newFile,
                displayName: newFile.name,
            };
            chatUiStore.setFile(fileDescriptor);
        },
        [chatUiStore]
    );

    const handleDelete = useCallback(() => {
        chatUiStore.setFile(undefined);
    }, [chatUiStore]);

    if (!chatUiStore.isFilePickerEnabled) {
        return null;
    }
    return (
        <Stack className={className} spacing="3" direction="column">
            <Eyebrow>Upload file</Eyebrow>
            <FilePicker
                name="attachments"
                buttonProps={{
                    color: 'primary',
                    fill: 'outline',
                }}
                typesNote="e.g. Screenshot of issue"
                value={chatUiStore.file}
                onSelected={handleSelected}
                onDelete={handleDelete}
                onReplace={handleReplace}
                data-cy="titan-chat-upload-file"
            />
        </Stack>
    );
});