( function ( wp ) {
	var hooks = wp.hooks;
	var createElement = wp.element.createElement;
	var Fragment = wp.element.Fragment;
	var blockEditor = wp.blockEditor || wp.editor || {};
	var components = wp.components || {};
	var InspectorControls = blockEditor.InspectorControls;
	var PanelBody = components.PanelBody;
	var RangeControl = components.RangeControl;
	var SelectControl = components.SelectControl;
	var createHigherOrderComponent = wp.compose.createHigherOrderComponent;

	if ( ! hooks || ! createHigherOrderComponent || ! InspectorControls || ! PanelBody || ! RangeControl || ! SelectControl ) {
		return;
	}
	var data = window.rsmsparkEmbedChrome || {};
	var i18n = data.i18n || {};
	var minWidth = data.minWidth || 40;
	var maxWidth = data.maxWidth || 100;

	function isEmbedBlock( name ) {
		if ( typeof name !== 'string' || '' === name ) {
			return false;
		}

		var prefixes = [
			'rsm-content-widgets/',
			'rsm-cw-compat/',
			'rsm/',
			'openrsm/',
		];

		for ( var i = 0; i < prefixes.length; i++ ) {
			if ( name.indexOf( prefixes[ i ] ) === 0 ) {
				return true;
			}
		}

		return name.indexOf( 'rsm-' ) === 0 && name.indexOf( '/' ) !== -1;
	}

	function embedSettings( attributes ) {
		var width = parseInt( attributes.rsmEmbedWidth, 10 );
		if ( isNaN( width ) || width <= 0 ) {
			width = 100;
		}
		width = Math.max( minWidth, Math.min( maxWidth, width ) );

		var align = attributes.rsmEmbedAlign || 'center';
		if ( align !== 'left' && align !== 'right' ) {
			align = 'center';
		}

		return { width: width, align: align };
	}

	function embedIsActive( settings ) {
		return settings.width < 100 || settings.align !== 'center';
	}

	function embedPanel( attributes, setAttributes ) {
		var settings = embedSettings( attributes );

		return createElement(
			PanelBody,
			{
				key: 'rsm-embed-width',
				title: i18n.panelEmbed || 'Embed width',
				initialOpen: embedIsActive( settings ),
			},
			createElement( RangeControl, {
				label: i18n.embedWidth || 'Width (%)',
				help:
					i18n.embedWidthHelp ||
					'Percentage of the available space in this column or content area—not the full browser width.',
				value: settings.width,
				onChange: function ( value ) {
					setAttributes( { rsmEmbedWidth: value || 100 } );
				},
				min: minWidth,
				max: maxWidth,
				step: 1,
			} ),
			settings.width < 100 &&
				createElement( SelectControl, {
					label: i18n.embedAlign || 'Alignment',
					help:
						i18n.embedAlignHelp ||
						'When width is below 100%, choose how the block sits in the column.',
					value: settings.align,
					options: [
						{
							label: i18n.embedAlignLeft || 'Left',
							value: 'left',
						},
						{
							label: i18n.embedAlignCenter || 'Center',
							value: 'center',
						},
						{
							label: i18n.embedAlignRight || 'Right',
							value: 'right',
						},
					],
					onChange: function ( value ) {
						setAttributes( { rsmEmbedAlign: value || 'center' } );
					},
				} )
		);
	}

	function embedWrapperProps( attributes ) {
		var settings = embedSettings( attributes );
		if ( ! embedIsActive( settings ) ) {
			return null;
		}

		return {
			className:
				'rsm-embed rsm-embed--align-' +
				settings.align,
			style: {
				'--rsm-embed-width': settings.width + '%',
			},
		};
	}

	var withEmbedInspector = createHigherOrderComponent( function ( BlockEdit ) {
		return function ( props ) {
			if ( ! isEmbedBlock( props.name ) ) {
				return createElement( BlockEdit, props );
			}

			return createElement(
				Fragment,
				null,
				createElement( BlockEdit, props ),
				createElement(
					InspectorControls,
					{ group: 'settings' },
					embedPanel( props.attributes || {}, props.setAttributes )
				)
			);
		};
	}, 'withRsmEmbedInspector' );

	hooks.addFilter( 'editor.BlockEdit', 'rsm/embed-chrome-inspector', withEmbedInspector );

	if ( hooks.addFilter ) {
		hooks.addFilter( 'blockEditor.BlockEdit', 'rsm/embed-chrome-inspector', withEmbedInspector );
	}

	if ( hooks.addFilter ) {
		hooks.addFilter( 'editor.BlockListBlock', 'rsm/embed-chrome-canvas', function ( BlockListBlockComponent ) {
			return function ( props ) {
				if ( ! isEmbedBlock( props.name ) ) {
					return createElement( BlockListBlockComponent, props );
				}

				var layoutProps = embedWrapperProps( props.attributes || {} );
				if ( ! layoutProps ) {
					return createElement( BlockListBlockComponent, props );
				}

				var wrapperProps = props.wrapperProps || {};
				var nextWrapper = Object.assign( {}, wrapperProps, {
					className: [ wrapperProps.className, layoutProps.className ]
						.filter( Boolean )
						.join( ' ' ),
					style: Object.assign( {}, wrapperProps.style || {}, layoutProps.style ),
				} );

				return createElement(
					BlockListBlockComponent,
					Object.assign( {}, props, { wrapperProps: nextWrapper } )
				);
			};
		} );
	}
} )( window.wp );
