( function( wp ) {

	const __ = wp.i18n.__;
	const createHigherOrderComponent = wp.compose.createHigherOrderComponent;
	const Fragment = wp.element.Fragment;
	const InspectorControls = wp.blockEditor.InspectorControls;
	const PanelBody = wp.components.PanelBody;
	const ToggleControl = wp.components.ToggleControl;
	const SelectControl = wp.components.SelectControl;
	const RangeControl = wp.components.RangeControl;
	const addFilter = wp.hooks.addFilter;
	const createElement = wp.element.createElement;
	const animationAllowedBlocks = [
		'core/group',
		'core/heading',
		'core/paragraph',
		'core/buttons',
		'core/button',
		'core/image',
		'core/list',
		'core/media-text',
		'core/navigation',
		'core/navigation-link',
		'core/post-author',
		'core/post-content',
		'core/post-date',
		'core/post-excerpt',
		'core/post-featured-image',
		'core/post-terms',
		'core/post-title',
		'core/query-title',
		'core/site-logo',
		'core/site-tagline',
		'core/site-title',
		'core/social-link',
		'core/term-description',
		'core/column',
		'core/columns',
		'core/list-item',
		'core/pullquote',
		'core/quote',
		'core/table',
		'core/video',
		'woocommerce/product-button',
		'woocommerce/product-image',
		'woocommerce/product-price',
		'woocommerce/product-rating',
		'woocommerce/product-sku',
		'woocommerce/product-stock-indicator',
		'woocommerce/product-summary',
		'woocommerce/product-details'
	];
	const animationAttrs = {
		acaiAnimationType: {
			type: 'string',
			default: 'none'
		},
		acaiAnimationDuration: {
			type: 'number',
			default: 1.4,
			minimum: 0.5,
			maximum: 3
		},
		acaiAnimationDelay: {
			type: 'number',
			default: 0,
			minimum: 0,
			maximum: 2
		},
		acaiAnimationOffset: {
			type: 'number',
			default: 10,
			minimum: 1,
			maximum: 20
		},
		acaiAnimationScale: {
			type: 'number',
			default: 0.1,
			minimum: 0.1,
			maximum: 0.9
		}
	};
	const prodImgAttrs = {
		acaiExtraProductImg: {
			type: 'boolean',
			default: false
		}
	};

	addFilter( 'blocks.registerBlockType', 'acai-animation/add-attributes',
		function( settings ) {
			if ( !animationAllowedBlocks.includes( settings.name ) ) {
				return settings;
			}
			settings.attributes = Object.assign( settings.attributes, animationAttrs );
			return settings;
		}
	);

	addFilter( 'blocks.registerBlockType', 'acai-product-image/add-attributes',
		function( settings ) {
			if ( settings.name === 'woocommerce/product-image' ) {
				settings.attributes = Object.assign( settings.attributes, prodImgAttrs );
			}
			return settings;
		}
	);

	const withInspectorControlsProdImg = createHigherOrderComponent( ( BlockEdit ) => {
		return (props) => {
			const acaiImgHover = props.attributes.acaiExtraProductImg || false;
			return createElement( Fragment,
				{},
				createElement( BlockEdit, props ),
				props.name === 'woocommerce/product-image' && props.isSelected && createElement( InspectorControls,
					{
						group: 'settings'
					},
					createElement(
						PanelBody,
						{
							title: __( 'Gallery Image', 'acai' ),
							initialOpen: true,
							className: 'acai-product-image-panel'
						},
						createElement(
							ToggleControl,
							{
								label: __( 'Display Gallery Image on Hover', 'acai' ),
								help: __( 'The 1st gallery image will display when hovering over the product image.', 'acai' ),
								checked: acaiImgHover,
								onChange: function( value ) {
									props.setAttributes(
										{
											acaiExtraProductImg: value
										}
									);
								}
							}
						)
					)
				)
			);
		};
	}, 'withInspectorControlsProdImg' );

	addFilter( 'editor.BlockEdit', 'acai-product-image/with-inspector-controls', withInspectorControlsProdImg );

	const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
		return (props) => {
			const acaiAnimationType = props.attributes.acaiAnimationType || 'none';
			const acaiAnimationDuration = props.attributes.acaiAnimationDuration || 1.4;
			const acaiAnimationDelay = props.attributes.acaiAnimationDelay || 0;
			const acaiAnimationOffset = props.attributes.acaiAnimationOffset || 10;
			const acaiAnimationScale = props.attributes.acaiAnimationScale || 0;
			let panelOpen = acaiAnimationType === 'none' ? false : true;
			return createElement( Fragment,
				{},
				createElement( BlockEdit, props ),
				animationAllowedBlocks.includes( props.name ) && props.isSelected && createElement( InspectorControls,
					{
						group: 'styles'
					},
					createElement(
						PanelBody,
						{
							title: __( 'Animation', 'acai' ),
							initialOpen: panelOpen,
							className: 'acai-animation-panel'
						},
						createElement(
							SelectControl,
							{
								label: __( 'Type', 'acai' ),
								value: acaiAnimationType,
								onChange: function( value ) {
									props.setAttributes(
										{
											acaiAnimationType: value
										}
									);
								},
								options: [
									{
										label: __( 'None', 'acai' ),
										value: 'none'
									},
									{
										label: __( 'Up', 'acai' ),
										value: 'fade-in-up'
									},
									{
										label: __( 'Down', 'acai' ),
										value: 'fade-in-down'
									},
									{
										label: __( 'From Left', 'acai' ),
										value: 'fade-in-left'
									},
									{
										label: __( 'From Right', 'acai' ),
										value: 'fade-in-right'
									},
									{
										label: __( 'Up from Left', 'acai' ),
										value: 'fade-in-up-left'
									},
									{
										label: __( 'Up from Right', 'acai' ),
										value: 'fade-in-up-right'
									},
									{
										label: __( 'Down from Left', 'acai' ),
										value: 'fade-in-down-left'
									},
									{
										label: __( 'Down from Right', 'acai' ),
										value: 'fade-in-down-right'
									},
									{
										label: __( 'Fade In', 'acai' ),
										value: 'fade-in'
									},
									{
										label: __( 'Scale In', 'acai' ),
										value: 'scale-in'
									}
								]
							}
						),
						acaiAnimationType !== 'none' && props.isSelected && createElement(
							RangeControl,
							{
								label: __( 'Duration (seconds)', 'acai' ),
								value: acaiAnimationDuration,
								onChange: function( value ) {
									props.setAttributes(
										{
											acaiAnimationDuration: value
										}
									);
								},
								min: 0.5,
								max: 3,
								step: 0.1,
								marks: [
									{
										value: 0.5,
										label: __( '0.5', 'acai' )
									},
									{
										value: 1.0,
										label: __( '1.0', 'acai' )
									},
									{
										value: 1.5,
										label: __( '1.5', 'acai' )
									},
									{
										value: 2.0,
										label: __( '2.0', 'acai' )
									},
									{
										value: 2.5,
										label: __( '2.5', 'acai' )
									},
									{
										value: 3.0,
										label: __( '3.0', 'acai' )
									},
								]
							}
						),
						acaiAnimationType !== 'none' && props.isSelected && createElement(
							RangeControl,
							{
								label: __( 'Delay (seconds)', 'acai' ),
								value: acaiAnimationDelay,
								onChange: function( value ) {
									props.setAttributes(
										{
											acaiAnimationDelay: value
										}
									);
								},
								min: 0,
								max: 2,
								step: 0.1,
								marks: [
									{
										value: 0,
										label: __( '0', 'acai' )
									},
									{
										value: 0.5,
										label: __( '0.5', 'acai' )
									},
									{
										value: 1.0,
										label: __( '1.0', 'acai' )
									},
									{
										value: 1.5,
										label: __( '1.5', 'acai' )
									},
									{
										value: 2.0,
										label: __( '2.0', 'acai' )
									},
								]
							}
						),
						acaiAnimationType !== 'none' && acaiAnimationType !== 'fade-in' && acaiAnimationType !== 'scale-in' && props.isSelected && createElement(
							RangeControl,
							{
								label: __( 'Offset (rem)', 'acai' ),
								value: acaiAnimationOffset,
								onChange: function( value ) {
									props.setAttributes(
										{
											acaiAnimationOffset: value
										}
									);
								},
								min: 1,
								max: 20,
								step: 1,
								marks: [
									{
										value: 1,
										label: __( '1', 'acai' )
									},
									{
										value: 5,
										label: __( '5', 'acai' )
									},
									{
										value: 10,
										label: __( '10', 'acai' )
									},
									{
										value: 15,
										label: __( '15', 'acai' )
									},
									{
										value: 20,
										label: __( '20', 'acai' )
									},
								]
							}
						),
						acaiAnimationType === 'scale-in' && props.isSelected && createElement(
							RangeControl,
							{
								label: __( 'Scale Start Size', 'acai' ),
								value: acaiAnimationScale,
								onChange: function( value ) {
									props.setAttributes(
										{
											acaiAnimationScale: value
										}
									);
								},
								min: 0.1,
								max: 0.9,
								step: 0.1,
								marks: [
									{
										value: 0.1,
										label: __( '0.1', 'acai' )
									},
									{
										value: 0.3,
										label: __( '0.3', 'acai' )
									},
									{
										value: 0.5,
										label: __( '0.5', 'acai' )
									},
									{
										value: 0.7,
										label: __( '0.7', 'acai' )
									},
									{
										value: 0.9,
										label: __( '0.9', 'acai' )
									},
								]
							}
						)
					)
				)
			);
		};
	}, 'withInspectorControls' );

	addFilter( 'editor.BlockEdit', 'acai-animation/with-inspector-controls', withInspectorControls );

} ) ( window.wp );