( function ( wp ) {
	'use strict';

	var element = wp.element;
	var hooks = wp.hooks;
	var compose = wp.compose;
	var blockEditor = wp.blockEditor || wp.editor;
	var components = wp.components;

	if ( ! element || ! hooks || ! compose || ! components ) {
		return;
	}

	var createElement = element.createElement;
	var Fragment = element.Fragment;
	var InspectorControls = blockEditor && blockEditor.InspectorControls;
	var PanelColorSettings = blockEditor && blockEditor.PanelColorSettings;
	var PanelBody = components.PanelBody;
	var SelectControl = components.SelectControl;
	var RangeControl = components.RangeControl;
	var ToggleControl = components.ToggleControl;
	var Notice = components.Notice;
	var BaseControl = components.BaseControl;
	var ColorPalette = components.ColorPalette || ( blockEditor && blockEditor.ColorPalette );
	var createHigherOrderComponent = compose.createHigherOrderComponent;

	if ( ! InspectorControls || ! PanelBody || ! RangeControl || ! SelectControl ) {
		return;
	}

	var data = window.rsmsparkRsfEditor || {};
	var strings = data.i18n || {};
	var supported = data.supportedBlocks || [];
	var hoverBlocks = data.hoverBlocks || [];
	var easingTypes = data.easingTypes || [
		'ease',
		'ease-in',
		'ease-out',
		'ease-in-out',
		'linear',
	];
	var settings = data.settings || {};
	var staggerBlocks = data.staggerBlocks || [ 'core/group', 'core/columns' ];
	var textAlignBlocks = data.textAlignBlocks || [];
	var layoutBandBlocks = data.layoutBandBlocks || [ 'core/group', 'core/columns' ];
	var breakpointsPro = !! data.breakpointsPro;
	var animationPresets = data.animationPresets || {};
	var presetLabels = data.presetLabels || {};

	// Do not bail when supportedBlocks is empty (localize timing). Embed width and
	// rsm-* prefix checks still apply; animation panels simply stay inactive.

	function isSupportedBlock( name ) {
		if ( supported.indexOf( name ) !== -1 ) {
			return true;
		}

		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 isContentWidgetsBlock( name ) {
		return (
			typeof name === 'string' &&
			( name.indexOf( 'rsm-content-widgets/' ) === 0 ||
				name.indexOf( 'rsm-cw-compat/' ) === 0 )
		);
	}

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

		if ( layoutBandBlocks.indexOf( name ) !== -1 ) {
			return true;
		}

		if ( isContentWidgetsBlock( name ) ) {
			return true;
		}

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

	function isRsmEmbedBlock( 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 minWidth = data.embedMinWidth || 40;
		var maxWidth = data.embedMaxWidth || 100;
		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 embedChromePanel( attributes, setAttributes ) {
		var settings = embedSettings( attributes );

		return createElement(
			PanelBody,
			{
				key: 'rsm-embed-width',
				title: strings.panelEmbed || 'Embed width',
				initialOpen: embedIsActive( settings ),
			},
			createElement( RangeControl, {
				label: strings.embedWidth || 'Width (%)',
				help:
					strings.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: data.embedMinWidth || 40,
				max: data.embedMaxWidth || 100,
				step: 1,
			} ),
			settings.width < 100 &&
				createElement( SelectControl, {
					label: strings.embedAlign || 'Alignment',
					help:
						strings.embedAlignHelp ||
						'When width is below 100%, choose how the block sits in the column.',
					value: settings.align,
					options: [
						{
							label: strings.embedAlignLeft || 'Left',
							value: 'left',
						},
						{
							label: strings.embedAlignCenter || 'Center',
							value: 'center',
						},
						{
							label: strings.embedAlignRight || 'Right',
							value: 'right',
						},
					],
					onChange: function ( value ) {
						setAttributes( { rsmEmbedAlign: value || 'center' } );
					},
				} )
		);
	}

	function embedChromeWrapperProps( 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 + '%',
			},
		};
	}

	function isCoreLayoutContainer( name ) {
		return (
			name === 'core/group' ||
			name === 'core/columns' ||
			name === 'core/buttons' ||
			name === 'core/media-text' ||
			name === 'core/cover'
		);
	}

	function layoutBandContainerNotice( blockName ) {
		if ( isCoreLayoutContainer( blockName ) ) {
			return strings.layoutBandGroupNotice || '';
		}

		if (
			blockName === 'core/button' ||
			blockName === 'core/heading' ||
			blockName === 'core/paragraph'
		) {
			return strings.layoutBandContainerNotice || '';
		}

		return '';
	}

	function layoutBandHasValues( attributes ) {
		return (
			( attributes.rsmBand || '' ) === 'full' ||
			!! attributes.rsmBandBg ||
			( attributes.rsmBandPadTop || 0 ) > 0 ||
			( attributes.rsmBandPadBottom || 0 ) > 0 ||
			( attributes.rsmSpacingTop || 0 ) > 0 ||
			( attributes.rsmSpacingBottom || 0 ) > 0
		);
	}

	function layoutBandPanel( attributes, setAttributes, blockName ) {
		return createElement(
			PanelBody,
			{
				key: 'rsf-layout-band',
				title: strings.panelLayout || 'Layout band',
				initialOpen: layoutBandHasValues( attributes ),
			},
			isCoreLayoutContainer( blockName ) &&
				layoutBandContainerNotice( blockName ) &&
				createElement( Notice, {
					status: 'info',
					isDismissible: false,
					children: layoutBandContainerNotice( blockName ),
				} ),
			createElement( SelectControl, {
				label: strings.bandWidth || 'Background width',
				value: attributes.rsmBand || '',
				options: [
					{
						label: strings.bandWidthDefault || 'Content width (default)',
						value: '',
					},
					{
						label: strings.bandWidthFull || 'Full screen band',
						value: 'full',
					},
				],
				help:
					strings.bandWidthHelp ||
					'Full screen stretches the background edge-to-edge. Content stays inside the theme content width.',
				onChange: function ( value ) {
					setAttributes( { rsmBand: value || '' } );
				},
			} ),
			( attributes.rsmBand || '' ) === 'full' &&
				BaseControl &&
				ColorPalette &&
				createElement(
					BaseControl,
					{ label: strings.bandBackground || 'Band background' },
					createElement( ColorPalette, {
						value: attributes.rsmBandBg || '',
						onChange: function ( value ) {
							setAttributes( { rsmBandBg: value || '' } );
						},
						clearable: true,
					} )
				),
			( attributes.rsmBand || '' ) === 'full' &&
				createElement( RangeControl, {
					label: strings.bandPadTop || 'Band padding top (px)',
					help: strings.bandPadHelp || 'Padding inside the colored band. Set to 0 to stack blocks flush within the same background.',
					value: attributes.rsmBandPadTop || 0,
					onChange: function ( value ) {
						setAttributes( { rsmBandPadTop: value || 0 } );
					},
					min: 0,
					max: 160,
					step: 4,
				} ),
			( attributes.rsmBand || '' ) === 'full' &&
				createElement( RangeControl, {
					label: strings.bandPadBottom || 'Band padding bottom (px)',
					help: strings.bandPadHelp || 'Padding inside the colored band. Set to 0 to stack blocks flush within the same background.',
					value: attributes.rsmBandPadBottom || 0,
					onChange: function ( value ) {
						setAttributes( { rsmBandPadBottom: value || 0 } );
					},
					min: 0,
					max: 160,
					step: 4,
				} ),
			createElement( RangeControl, {
				label: strings.spacingTop || 'Spacing above block (px)',
				help: strings.spacingHelp || 'Margin outside the band, between sections. Replaces WordPress block Dimensions margins when set here.',
				value: attributes.rsmSpacingTop || 0,
				onChange: function ( value ) {
					setAttributes( { rsmSpacingTop: value || 0 } );
				},
				min: 0,
				max: 160,
				step: 4,
			} ),
			createElement( RangeControl, {
				label: strings.spacingBottom || 'Spacing below block (px)',
				help: strings.spacingHelp || 'Margin outside the band, between sections. Replaces WordPress block Dimensions margins when set here.',
				value: attributes.rsmSpacingBottom || 0,
				onChange: function ( value ) {
					setAttributes( { rsmSpacingBottom: value || 0 } );
				},
				min: 0,
				max: 160,
				step: 4,
			} )
		);
	}

	function layoutBandWrapperProps( attributes ) {
		var band = attributes.rsmBand || '';
		var styles = {};
		var classes = [];

		if ( band === 'full' ) {
			classes.push( 'rsmspark-rsf-band', 'rsmspark-rsf-band--full' );
			if ( ( attributes.rsmSpacingTop || 0 ) === 0 ) {
				classes.push( 'rsmspark-rsf-band--spacing-top-0' );
			}
			if ( ( attributes.rsmSpacingBottom || 0 ) === 0 ) {
				classes.push( 'rsmspark-rsf-band--spacing-bottom-0' );
			}
			if ( attributes.rsmBandBg ) {
				styles.backgroundColor = attributes.rsmBandBg;
			}
			if ( ( attributes.rsmBandPadTop || 0 ) > 0 ) {
				styles.paddingTop = ( attributes.rsmBandPadTop || 0 ) + 'px';
			}
			if ( ( attributes.rsmBandPadBottom || 0 ) > 0 ) {
				styles.paddingBottom = ( attributes.rsmBandPadBottom || 0 ) + 'px';
			}
			if ( ( attributes.rsmSpacingTop || 0 ) > 0 ) {
				styles.marginTop = ( attributes.rsmSpacingTop || 0 ) + 'px';
			}
			if ( ( attributes.rsmSpacingBottom || 0 ) > 0 ) {
				styles.marginBottom = ( attributes.rsmSpacingBottom || 0 ) + 'px';
			}
		} else {
			if ( ( attributes.rsmSpacingTop || 0 ) > 0 ) {
				styles.marginTop = ( attributes.rsmSpacingTop || 0 ) + 'px';
			}
			if ( ( attributes.rsmSpacingBottom || 0 ) > 0 ) {
				styles.marginBottom = ( attributes.rsmSpacingBottom || 0 ) + 'px';
			}
		}

		if ( ! classes.length && ! Object.keys( styles ).length ) {
			return null;
		}

		return { className: classes.join( ' ' ), style: styles };
	}

	function animationOptions() {
		return [
			{ label: strings.animationNone || 'None', value: 'none' },
			{ label: strings.animationFade || 'Fade in', value: 'fade' },
			{ label: strings.animationSlideUp || 'Slide up', value: 'slide-up' },
			{ label: strings.animationSlideDown || 'Slide down', value: 'slide-down' },
			{ label: strings.animationSlideLeft || 'Slide left', value: 'slide-left' },
			{ label: strings.animationSlideRight || 'Slide right', value: 'slide-right' },
			{ label: strings.animationZoomIn || 'Zoom in', value: 'zoom-in' },
			{ label: strings.animationZoomOut || 'Zoom out', value: 'zoom-out' },
			{ label: strings.animationFadeLeft || 'Fade left', value: 'fade-left' },
			{ label: strings.animationFadeRight || 'Fade right', value: 'fade-right' },
		];
	}

	function presetOptions() {
		var options = [
			{
				label: strings.animationPresetCustom || 'Custom',
				value: '',
			},
		];

		Object.keys( animationPresets ).forEach( function ( key ) {
			options.push( {
				label: presetLabels[ key ] || key,
				value: key,
			} );
		} );

		return options;
	}

	function detectActivePreset( attrs ) {
		var match = '';
		Object.keys( animationPresets ).some( function ( key ) {
			var preset = animationPresets[ key ];
			var same =
				( attrs.rsmAnimation || 'none' ) === ( preset.rsmAnimation || 'none' ) &&
				( attrs.rsmAnimationDuration || 0 ) ===
					( preset.rsmAnimationDuration || 0 ) &&
				( attrs.rsmAnimationDelay || 0 ) === ( preset.rsmAnimationDelay || 0 ) &&
				( attrs.rsmAnimationEasing || '' ) ===
					( preset.rsmAnimationEasing || '' ) &&
				( attrs.rsmAnimationStagger || 0 ) ===
					( preset.rsmAnimationStagger || 0 );

			if ( same ) {
				match = key;
				return true;
			}

			return false;
		} );

		return match;
	}

	function easingOptions() {
		return easingTypes.map( function ( value ) {
			return { label: value, value: value };
		} );
	}

	function isTextAlignBlock( name ) {
		return textAlignBlocks.indexOf( name ) !== -1;
	}

	function textAlignOptions() {
		return [
			{ label: strings.textAlignDefault || 'Inherit', value: '' },
			{ label: strings.textAlignLeft || 'Left', value: 'left' },
			{ label: strings.textAlignCenter || 'Center', value: 'center' },
			{ label: strings.textAlignRight || 'Right', value: 'right' },
		];
	}

	function visibilitySummary( attrs ) {
		var parts = [];

		if ( attrs.rsmHideMobile ) {
			parts.push( strings.visibilityHideMobile || 'Hide mobile' );
		}
		if ( attrs.rsmHideTablet ) {
			parts.push( strings.visibilityHideTablet || 'Hide tablet' );
		}
		if ( attrs.rsmHideDesktop ) {
			parts.push( strings.visibilityHideDesktop || 'Hide desktop' );
		}

		return parts.join( ', ' );
	}

	function classesFromAttributes( attrs ) {
		var classes = [ 'rsmspark-rsf-block' ];

		if ( attrs.rsmHideMobile ) {
			classes.push( 'rsmspark-rsf-hide-mobile' );
		}
		if ( attrs.rsmHideTablet ) {
			classes.push( 'rsmspark-rsf-hide-tablet' );
		}
		if ( attrs.rsmHideDesktop ) {
			classes.push( 'rsmspark-rsf-hide-desktop' );
		}

		[ 'mobile', 'tablet', 'desktop' ].forEach( function ( bp ) {
			var key = 'rsmTextAlign' + bp.charAt( 0 ).toUpperCase() + bp.slice( 1 );
			var align = attrs[ key ] || '';
			if ( align === 'left' || align === 'center' || align === 'right' ) {
				classes.push( 'rsmspark-rsf-text-' + bp + '-' + align );
			}
		} );

		var animation = attrs.rsmAnimation || 'none';
		var stagger = attrs.rsmAnimationStagger || 0;
		if ( animation && animation !== 'none' ) {
			if ( stagger > 0 ) {
				classes.push( 'rsmspark-rsf-stagger-host' );
			} else {
				classes.push( 'rsmspark-rsf-animate', 'rsmspark-rsf-animate--' + animation );
			}
		}

		if (
			attrs.rsmHoverTextColor ||
			attrs.rsmHoverBackgroundColor ||
			attrs.rsmHoverBorderColor
		) {
			classes.push( 'rsmspark-rsf-hover' );
		}

		return classes.join( ' ' );
	}

	function dataAttributesFromAttributes( attrs, blockName ) {
		var animation = attrs.rsmAnimation || 'none';
		if ( ! animation || animation === 'none' ) {
			return {};
		}

		var duration =
			attrs.rsmAnimationDuration > 0
				? attrs.rsmAnimationDuration
				: settings.default_duration_ms || 600;
		var delay = attrs.rsmAnimationDelay || 0;
		var easing = attrs.rsmAnimationEasing || settings.default_easing || 'ease-out';
		var stagger = attrs.rsmAnimationStagger || 0;
		var isStaggerBlock = staggerBlocks.indexOf( blockName ) !== -1;

		if ( stagger > 0 && isStaggerBlock ) {
			return {
				'data-rsm-stagger': String( stagger ),
				'data-rsm-stagger-animation': animation,
				'data-rsm-stagger-duration': String( duration ),
				'data-rsm-stagger-delay': String( delay ),
				'data-rsm-stagger-easing': easing,
			};
		}

		return {
			'data-rsm-animation': animation,
			'data-rsm-animation-duration': String( duration ),
			'data-rsm-animation-delay': String( delay ),
			'data-rsm-animation-easing': easing,
		};
	}

	function hoverStyleFromAttributes( attrs ) {
		var parts = [];

		if ( attrs.rsmHoverTextColor ) {
			parts.push( '--rsm-hover-text:' + attrs.rsmHoverTextColor );
		}
		if ( attrs.rsmHoverBackgroundColor ) {
			parts.push( '--rsm-hover-bg:' + attrs.rsmHoverBackgroundColor );
		}
		if ( attrs.rsmHoverBorderColor ) {
			parts.push( '--rsm-hover-border:' + attrs.rsmHoverBorderColor );
		}

		return parts.length ? parts.join( ';' ) + ';' : '';
	}

	var withRsfInspector = createHigherOrderComponent( function ( BlockEdit ) {
		return function ( props ) {
			var name = props.name;
			var attributes = props.attributes || {};
			var setAttributes = props.setAttributes;
			var isSupported = isSupportedBlock( name );
			var isHoverBlock = hoverBlocks.indexOf( name ) !== -1;
			var isTextAlign = isTextAlignBlock( name );

			if ( ! isSupported && ! isHoverBlock && ! isTextAlign && ! isRsmEmbedBlock( name ) ) {
				return createElement( BlockEdit, props );
			}

			var defaultDuration = settings.default_duration_ms || 600;
			var defaultEasing = settings.default_easing || 'ease-out';
			var isStaggerBlock = staggerBlocks.indexOf( name ) !== -1;
			var activePreset = detectActivePreset( attributes );

			var hasAnimation = ( attributes.rsmAnimation || 'none' ) !== 'none';
			var children = [ createElement( BlockEdit, props ) ];

			var panels = [];

			if ( isSupported ) {
				panels.push(
					layoutBandPanel( attributes, setAttributes, name )
				);
			}

			if ( isRsmEmbedBlock( name ) ) {
				panels.push( embedChromePanel( attributes, setAttributes ) );
			}

			if ( isSupported ) {
				panels.push(
					createElement(
						PanelBody,
						{
							key: 'rsf-animation',
							title: strings.panelAnimation || 'Scroll animation',
							initialOpen: hasAnimation,
						},
						createElement( SelectControl, {
							label: strings.animationPreset || 'Preset',
							value: activePreset,
							options: presetOptions(),
							onChange: function ( value ) {
								if ( ! value || ! animationPresets[ value ] ) {
									return;
								}

								var preset = animationPresets[ value ];
								setAttributes( {
									rsmAnimation: preset.rsmAnimation || 'none',
									rsmAnimationDuration:
										preset.rsmAnimationDuration || 0,
									rsmAnimationDelay: preset.rsmAnimationDelay || 0,
									rsmAnimationEasing: preset.rsmAnimationEasing || '',
									rsmAnimationStagger:
										preset.rsmAnimationStagger || 0,
								} );
							},
						} ),
						createElement( SelectControl, {
							label: strings.animationType || 'Effect',
							value: attributes.rsmAnimation || 'none',
							options: animationOptions(),
							onChange: function ( value ) {
								setAttributes( { rsmAnimation: value || 'none' } );
							},
						} ),
						hasAnimation &&
							isStaggerBlock &&
							createElement( RangeControl, {
								label: strings.stagger || 'Stagger children (ms)',
								help:
									strings.staggerHelp ||
									'Animate direct child blocks one after another.',
								value: attributes.rsmAnimationStagger || 0,
								onChange: function ( value ) {
									setAttributes( {
										rsmAnimationStagger: value || 0,
									} );
								},
								min: 0,
								max: 500,
								step: 20,
							} ),
						hasAnimation &&
							createElement( RangeControl, {
								label: strings.duration || 'Duration (ms)',
								value:
									attributes.rsmAnimationDuration > 0
										? attributes.rsmAnimationDuration
										: defaultDuration,
								onChange: function ( value ) {
									setAttributes( {
										rsmAnimationDuration: value || 0,
									} );
								},
								min: 100,
								max: 3000,
								step: 50,
							} ),
						hasAnimation &&
							createElement( RangeControl, {
								label: strings.delay || 'Delay (ms)',
								value: attributes.rsmAnimationDelay || 0,
								onChange: function ( value ) {
									setAttributes( {
										rsmAnimationDelay: value || 0,
									} );
								},
								min: 0,
								max: 2000,
								step: 50,
							} ),
						hasAnimation &&
							createElement( SelectControl, {
								label: strings.easing || 'Easing',
								value:
									attributes.rsmAnimationEasing || defaultEasing,
								options: easingOptions(),
								onChange: function ( value ) {
									setAttributes( {
										rsmAnimationEasing: value || '',
									} );
								},
							} ),
						hasAnimation &&
							createElement( Notice, {
								status: 'info',
								isDismissible: false,
								children:
									strings.previewNote ||
									'Animations play on the front end and in Focus preview after save.',
							} )
					),
					createElement(
						PanelBody,
						{
							key: 'rsf-visibility',
							title: strings.panelVisibility || 'Responsive visibility',
							initialOpen: false,
						},
						createElement( ToggleControl, {
							label: strings.hideMobile || 'Hide on mobile',
							checked: !! attributes.rsmHideMobile,
							onChange: function ( value ) {
								setAttributes( { rsmHideMobile: !! value } );
							},
						} ),
						createElement( ToggleControl, {
							label: strings.hideTablet || 'Hide on tablet',
							checked: !! attributes.rsmHideTablet,
							onChange: function ( value ) {
								setAttributes( { rsmHideTablet: !! value } );
							},
						} ),
						createElement( ToggleControl, {
							label: strings.hideDesktop || 'Hide on desktop',
							checked: !! attributes.rsmHideDesktop,
							onChange: function ( value ) {
								setAttributes( { rsmHideDesktop: !! value } );
							},
						} )
					)
				);
			}

			if ( isTextAlign && breakpointsPro ) {
				panels.push(
					createElement(
						PanelBody,
						{
							key: 'rsf-text-align',
							title: strings.panelTextAlign || 'Responsive text alignment',
							initialOpen: false,
						},
						createElement( SelectControl, {
							label: strings.textAlignMobile || 'Mobile alignment',
							value: attributes.rsmTextAlignMobile || '',
							options: textAlignOptions(),
							onChange: function ( value ) {
								setAttributes( { rsmTextAlignMobile: value || '' } );
							},
						} ),
						createElement( SelectControl, {
							label: strings.textAlignTablet || 'Tablet alignment',
							value: attributes.rsmTextAlignTablet || '',
							options: textAlignOptions(),
							onChange: function ( value ) {
								setAttributes( { rsmTextAlignTablet: value || '' } );
							},
						} ),
						createElement( SelectControl, {
							label: strings.textAlignDesktop || 'Desktop alignment',
							value: attributes.rsmTextAlignDesktop || '',
							options: textAlignOptions(),
							onChange: function ( value ) {
								setAttributes( { rsmTextAlignDesktop: value || '' } );
							},
						} )
					)
				);
			}

			if ( isHoverBlock && PanelColorSettings ) {
				children.push(
					createElement(
						InspectorControls,
						{ key: 'rsf-controls-hover', group: 'styles' },
						createElement( PanelColorSettings, {
							title: strings.panelHover || 'Hover colors',
							colorSettings: [
								{
									value: attributes.rsmHoverTextColor || '',
									onChange: function ( value ) {
										setAttributes( {
											rsmHoverTextColor: value || '',
										} );
									},
									label: strings.hoverText || 'Hover text',
								},
								{
									value: attributes.rsmHoverBackgroundColor || '',
									onChange: function ( value ) {
										setAttributes( {
											rsmHoverBackgroundColor: value || '',
										} );
									},
									label: strings.hoverBackground || 'Hover background',
								},
								{
									value: attributes.rsmHoverBorderColor || '',
									onChange: function ( value ) {
										setAttributes( {
											rsmHoverBorderColor: value || '',
										} );
									},
									label: strings.hoverBorder || 'Hover border',
								},
							],
						} )
					)
				);
			}

			if ( panels.length ) {
				children.push(
					createElement.apply(
						null,
						[
							InspectorControls,
							{ key: 'rsf-controls-animation', group: 'settings' },
						].concat( panels )
					)
				);
			}

			return createElement.apply( null, [ Fragment, null ].concat( children ) );
		};
	}, 'withRsfInspector' );

	hooks.addFilter( 'editor.BlockEdit', 'rsm/rsf-inspector', withRsfInspector );

	if ( hooks.addFilter ) {
		hooks.addFilter( 'blockEditor.BlockEdit', 'rsm/rsf-inspector', withRsfInspector );
	}

	hooks.addFilter( 'editor.BlockListBlock', 'rsm/rsf-editor-classes', function ( BlockListBlock ) {
		return function ( props ) {
			var name = props.name;
			var attributes = props.attributes || {};
			var wrapperProps = props.wrapperProps || {};

			if ( ! isSupportedBlock( name ) && hoverBlocks.indexOf( name ) === -1 && ! isTextAlignBlock( name ) && ! isRsmEmbedBlock( name ) ) {
				return createElement( BlockListBlock, props );
			}

			var extraClass = classesFromAttributes( attributes );
			var hoverStyle = hoverStyleFromAttributes( attributes );
			var dataAttrs = dataAttributesFromAttributes( attributes, name );
			var visibilityHint = visibilitySummary( attributes );
			var className = [ wrapperProps.className, extraClass ]
				.filter( Boolean )
				.join( ' ' );
			var nextWrapper = Object.assign( {}, wrapperProps, dataAttrs, {
				className: className,
			} );

			if ( visibilityHint ) {
				nextWrapper[ 'data-rsm-rsf-visibility-hint' ] = visibilityHint;
				var baseTitle = wrapperProps.title || '';
				nextWrapper.title = baseTitle
					? baseTitle + ' — ' + visibilityHint
					: visibilityHint;
			}

			if ( hoverStyle ) {
				nextWrapper.style = Object.assign( {}, wrapperProps.style || {}, {
					cssText: ( ( wrapperProps.style && wrapperProps.style.cssText ) || '' ) +
						hoverStyle,
				} );
			}

			if ( isSupportedBlock( name ) ) {
				var layoutProps = layoutBandWrapperProps( attributes );
				if ( layoutProps ) {
					nextWrapper.className = [ nextWrapper.className, layoutProps.className ]
						.filter( Boolean )
						.join( ' ' );
					nextWrapper.style = Object.assign(
						{},
						nextWrapper.style || {},
						layoutProps.style
					);
				}
			}

			if ( isRsmEmbedBlock( name ) ) {
				var embedProps = embedChromeWrapperProps( attributes );
				if ( embedProps ) {
					nextWrapper.className = [ nextWrapper.className, embedProps.className ]
						.filter( Boolean )
						.join( ' ' );
					nextWrapper.style = Object.assign(
						{},
						nextWrapper.style || {},
						embedProps.style
					);
				}
			}

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