import { registerFormatType } from '@wordpress/rich-text';
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton, Button } from '@wordpress/components';

/*
https://developer.wordpress.org/block-editor/reference-guides/components/modal/
*/
import { Modal } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyCustomButtonIcon = ( props ) => {    

    const [ isOpen, setOpen ] = useState( false );
    const openModal = () => setOpen( true );
    const closeModal = () => setOpen( false );



    return (
        <BlockControls>
            <ToolbarGroup>
                <ToolbarButton
                    icon="buddicons-activity"
                    title="Custom Icon"
                    onClick={ openModal }                    
                />
                { isOpen && (
                <Modal title="Search an Icon" onRequestClose={ closeModal }>
                    <Button onClick={'**What should I put here to update the content?**'}>
                        Insert a thing
                    </Button>

                </Modal>
            ) }
            </ToolbarGroup>
        </BlockControls>
    );
};

registerFormatType( 'my-custom-format/my-sample-output', {
    title: 'Custom Icon',
    tagName: 'i',
    className: null,    
    attributes: {
        className: 'class'        
    },
    edit: MyCustomButtonIcon,
} );