import { sprintf, __ } from '@wordpress/i18n';
import { createHigherOrderComponent } from '@wordpress/compose';

export const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
	return ( props ) => {
		const {
			context: { 'spectra/modal/modalTrigger': modalTrigger },
		} = props;
		
		if ( 'spectra/modal-child-trigger' !== props.name ) {
			return <BlockEdit { ...props } />;
		}

		const triggerType = [ 'custom-class', 'custom-id', 'automatic' ];
		const id = props.clientId.slice( 0, 8 );
		return (
			<>
				{ triggerType.includes( modalTrigger ) && (
					<div>
						<h2>
							{ sprintf(
								/**Translators: Modal ID. */
								__( 'Modal Placeholder - ID %1$s', 'spectra-pro' ),
								id
							) }
						</h2>
						<p>
							{ __(
								'Click here to edit modal settings. This text will not be visible in the frontend.',
								'spectra-pro'
							) }
						</p>
					</div>
				) }
				<BlockEdit { ...props } />
			</>
		);
	};
}, 'withInspectorControl' );
