/**
 * Sprint 11 PR 1 — Gutenberg editor JS for the Seekmodo Search block.
 *
 * Written in vanilla `wp.element.createElement` (no JSX) so this file
 * can be enqueued directly from `blocks/src/` without a build step.
 * `npm run build` from `blocks/` produces a minified copy in
 * `blocks/build/search/index.js` that the PHP registry prefers when
 * present.
 *
 * The editor preview is a static placeholder card. The real
 * `<seekmodo-search-box>` rendering happens server-side via the
 * dynamic-block render callback in `Numinix\SeekmodoWordPress\Blocks\Registry`.
 */
( 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 ToggleControl = Components.ToggleControl || function () { return null; };
	var __ = ( wp.i18n && wp.i18n.__ ) ? wp.i18n.__ : function ( s ) { return s; };

	registerBlockType( 'seekmodo/search', {
		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 Search', 'seekmodo-wordpress' ), initialOpen: true },
						el( TextControl, {
							label: __( 'Placeholder', 'seekmodo-wordpress' ),
							value: attrs.placeholder || '',
							onChange: setAttr( 'placeholder' )
						} ),
						el( TextControl, {
							label: __( 'Initial query', 'seekmodo-wordpress' ),
							value: attrs.value || '',
							onChange: setAttr( 'value' )
						} ),
						el( ToggleControl, {
							label: __( 'Show typeahead overlay', 'seekmodo-wordpress' ),
							checked: !! attrs.withTypeahead,
							onChange: setAttr( 'withTypeahead' )
						} ),
						el( ToggleControl, {
							label: __( 'Submit on Enter', 'seekmodo-wordpress' ),
							checked: attrs.submitOnEnter !== false,
							onChange: setAttr( 'submitOnEnter' )
						} )
					)
				),
				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 Search box', 'seekmodo-wordpress' ) ),
					el( 'div', {
						style: {
							border: '1px solid #d4d4d8',
							borderRadius: 4,
							padding: '8px 10px',
							color: '#6c7781',
							background: '#fafafa'
						}
					}, attrs.placeholder || __( 'Search products', 'seekmodo-wordpress' ) )
				)
			);
		},
		save: function () {
			return null;
		}
	} );
} )( window.wp );
