/**
 * BLOCK: Genesis Blocks Button
 */

// Don't delete this import, as it's used in the Pricing Table block.
import './styles/style.scss';

import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { useEffect } from '@wordpress/element';

import deprecated from './deprecated';
import createButton from './deprecated/create-button';

function Edit( { attributes, clientId } ) {
	const { replaceBlocks, replaceInnerBlocks } =
		useDispatch( 'core/block-editor' );
	const { getBlock, getBlockParents } = useSelect( ( select ) =>
		select( 'core/block-editor' )
	);

	useEffect( () => {
		const parentId = getBlockParents( clientId, true )?.[ 0 ];
		const hasParent = !! parentId;

		// Replace this GB Button block with the Core Button block.
		if ( hasParent ) {
			replaceInnerBlocks(
				parentId,
				getBlock( parentId ).innerBlocks?.map( ( block ) => {
					return block.clientId === clientId
						? createButton( attributes )
						: block;
				} )
			);
		} else {
			replaceBlocks( clientId, createButton( attributes ) );
		}
	}, [ clientId ] ); // eslint-disable-line react-hooks/exhaustive-deps

	return null;
}

// Register the block
registerBlockType( 'genesis-blocks/gb-button', {
	title: __( 'Button', 'genesis-blocks' ),
	description: __( 'Add a customizable button.', 'genesis-blocks' ),
	icon: 'admin-links',
	supports: { inserter: false },
	category: 'genesis-blocks',
	keywords: [
		__( 'button', 'genesis-blocks' ),
		__( 'link', 'genesis-blocks' ),
		__( 'genesis', 'genesis-blocks' ),
	],
	edit: Edit,
	save: () => null,
	deprecated,
} );