/**
 * WordPress dependencies
 */
import { Button } from '@wordpress/components';
import { compose } from '@wordpress/compose';
import { createPortal, useEffect, useState } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
 
const TopBtn = ( { postPreviewButton } ) => {
	// Empty div element our button will be placed into
	// This div will be inserted before the Publish button with useEffect()
	const [ container ] = useState( document.createElement( 'div' ) );
 
	// The button submit handler
	const onSubmit = () => {
		console.log( 'Button pressed!' );
	};
 
	// Do the actual placing/removing of the button in the DOM
	useEffect( () => {
		// Ensure we have a Preview button to place next to
		if ( ! postPreviewButton ) {
			return;
		}
 
		// Insert our button immediately after the post preview button.
		postPreviewButton.parentNode.insertBefore(
			container,
			postPreviewButton.nextSibling
		);
		// Remove our button on component unload
		return () => {
			postPreviewButton.parentNode.removeChild( container );
		};
	}, [ postPreviewButton ] );
 
	// Use createPortal to place our component into the <div/> container
	return createPortal(
		<>
			<Button
				isSecondary
				showTooltip={ true }
				label="My Custom Button"
				onClick={ onSubmit }
			>
				My Btn
			</Button>
			<span>&nbsp;</span>
		</>,
		container
	);
};
 
export default compose( [
	withSelect( () => {
		return {
			// Provide the Post preview button element so we'll know where to
			// place our component
			postPreviewButton: document.querySelector( '.editor-post-preview' ),
		};
	} ),
] )( TopBtn );