import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { plus } from '@wordpress/icons';
import { useRegistry } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { useCallback } from '@wordpress/element';
import { createBlock } from '@wordpress/blocks';

const CHILD_NAME = 'axcelersblocks/list-item';

export default function AddListItemAppender( { clientId } ) {
	const registry = useRegistry();

	const onAdd = useCallback( () => {
		const order = registry.select( blockEditorStore ).getBlockOrder( clientId );
		registry
			.dispatch( blockEditorStore )
			.insertBlocks( createBlock( CHILD_NAME ), order.length, clientId, false );
	}, [ registry, clientId ] );

	return (
		<Button
			className="axcelersblocks-list__add-item"
			icon={ plus }
			onClick={ onAdd }
			label={ __( 'Add Item', 'axcelersblocks' ) }
			showTooltip
		/>
	);
}
