import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react';

import IconButtonElement from '../../elements/IconButtonElement';

const NewCollection: FunctionComponent = () => {
    const element = useRef<HTMLDivElement>(null);

    const showCollectionEditor = useCallback(() => {
        import('../../components/collectionEditor/collectionEditor').then(({default: CollectionEditor}) => {
            const serverId = window.ApiClient.serverId();
            const collectionEditor = new CollectionEditor();
            collectionEditor.show({
                items: [],
                serverId: serverId
            });
        });
    }, []);

    useEffect(() => {
        const btnNewCollection = element.current?.querySelector('.btnNewCollection');
        if (btnNewCollection) {
            btnNewCollection.addEventListener('click', showCollectionEditor);
        }
    }, [showCollectionEditor]);

    return (
        <div ref={element}>
            <IconButtonElement
                is='paper-icon-button-light'
                className='btnNewCollection autoSize'
                title='Add'
                icon='material-icons add'
            />
        </div>
    );
};

export default NewCollection;