/**
 * Sprint 11 PR 1 — Gutenberg editor JS for the Seekmodo Recommendations block.
 *
 * See `blocks/src/search/index.js` for the design rationale (vanilla
 * wp.element, dynamic block, server-side rendering).
 */
( function ( wp ) {
	if ( ! wp || ! wp.blocks || ! wp.element || ! wp.blockEditor ) {
		return;
	}

	var el = wp.element.createElement;
	var Fragment = wp.element.Fragment;
	var registerBlockType = wp.blocks.registerBlockType;
	var useBlockProps = wp.blockEditor.useBlockProps;
	var InspectorControls = wp.blockEditor.InspectorControls;
	var Components = wp.components || {};
	var PanelBody = Components.PanelBody || function ( props ) { return el( 'div', null, props.children ); };
	var TextControl = Components.TextControl || function () { return null; };
	var SelectControl = Components.SelectControl || function () { return null; };
	var __ = ( wp.i18n && wp.i18n.__ ) ? wp.i18n.__ : function ( s ) { return s; };

	registerBlockType( 'seekmodo/recommend', {
		edit: function ( props ) {
			var attrs = props.attributes;
			var setAttr = function ( key ) {
				return function ( value ) {
					var update = {};
					update[ key ] = value;
					props.setAttributes( update );
				};
			};

			return el(
				Fragment,
				null,
				el(
					InspectorControls,
					null,
					el(
						PanelBody,
						{ title: __( 'Seekmodo Recommendations', 'seekmodo-wordpress' ), initialOpen: true },
						el( SelectControl, {
							label: __( 'Algorithm', 'seekmodo-wordpress' ),
							value: attrs.algorithm || 'related',
							options: [
								{ label: 'related', value: 'related' },
								{ label: 'popular', value: 'popular' },
								{ label: 'frequently_bought_together', value: 'frequently_bought_together' },
								{ label: 'similar_to_viewed', value: 'similar_to_viewed' }
							],
							onChange: setAttr( 'algorithm' )
						} ),
						el( TextControl, {
							label: __( 'Placement label', 'seekmodo-wordpress' ),
							value: attrs.placement || '',
							onChange: setAttr( 'placement' )
						} ),
						el( TextControl, {
							label: __( 'Source product ID (optional)', 'seekmodo-wordpress' ),
							value: attrs.sourceDocId || '',
							onChange: setAttr( 'sourceDocId' )
						} ),
						el( TextControl, {
							type: 'number',
							label: __( 'Maximum items', 'seekmodo-wordpress' ),
							value: attrs.limit != null ? String( attrs.limit ) : '6',
							onChange: function ( value ) {
								var n = parseInt( value, 10 );
								setAttr( 'limit' )( isNaN( n ) ? 6 : n );
							}
						} )
					)
				),
				el(
					'div',
					useBlockProps( {
						style: {
							border: '1px dashed #c3c4c7',
							borderRadius: 6,
							padding: 12,
							background: '#fff'
						}
					} ),
					el( 'div', { style: { fontSize: 11, color: '#6c7781', marginBottom: 6 } }, __( 'Seekmodo \u00b7 Recommendations', 'seekmodo-wordpress' ) ),
					el( 'div', { style: { color: '#6c7781' } }, ( attrs.algorithm || 'related' ) + ' \u2022 ' + ( attrs.placement || 'pdp' ) + ' \u2022 ' + ( attrs.limit || 6 ) + ' items' )
				)
			);
		},
		save: function () {
			return null;
		}
	} );
} )( window.wp );
