( function( wp ) {

	var __                = wp.i18n.__;
	var registerBlockType = wp.blocks.registerBlockType;
	var createElement     = wp.element.createElement;
	var Fragment          = wp.element.Fragment;

	var InspectorControls = wp.blockEditor.InspectorControls;
	var useBlockProps     = wp.blockEditor.useBlockProps;

	var PanelBody         = wp.components.PanelBody;
	var TextControl       = wp.components.TextControl;

	var ServerSideRender  = wp.serverSideRender;

	var HBFWC_BLOCK_CATEGORY    = 'hbfwc';
	var HBFWC_ICON_AVAILABILITY = 'calendar-alt';
	var HBFWC_ICON_SEARCH_FORM  = 'search';


	function selectBlock( clientId ) {
		if ( ! clientId || ! wp.data || ! wp.data.dispatch ) {
			return;
		}

		wp.data.dispatch( 'core/block-editor' ).selectBlock( clientId );
	}


	function renderReadonlyServerSidePreview( block, attributes, clientId ) {

		return createElement(
			'div',
			{
				className: 'hbfwc-editor-preview',

				onMouseDownCapture: function() {
					selectBlock( clientId );
				},

				onClickCapture: function() {
					selectBlock( clientId );
				},

				onSubmitCapture: function( event ) {
					event.preventDefault();
					event.stopPropagation();
					selectBlock( clientId );
				}
			},

			createElement( ServerSideRender, {
				block: block,
				attributes: attributes || {}
			} )
		);
	}


	/* -----------------------------
	   Availability block
	------------------------------ */

	registerBlockType( 'hbfwc/availability', {

		title: __( 'Availability', 'hotel-booking-for-woocommerce' ),
		description: __( 'Display accommodation availability and listing results.', 'hotel-booking-for-woocommerce' ),
		icon: HBFWC_ICON_AVAILABILITY,
		category: HBFWC_BLOCK_CATEGORY,

		supports: {
			align: [ 'wide', 'full' ],
			html: false
		},

		edit: function( props ) {

			var blockProps = useBlockProps();

			return createElement(
				'div',
				blockProps,
				renderReadonlyServerSidePreview(
					'hbfwc/availability',
					{},
					props.clientId
				)
			);

		},

		save: function() {
			return null;
		}

	} );


	/* -----------------------------
	   Search form block
	------------------------------ */

	registerBlockType( 'hbfwc/search-form', {

		title: __( 'Search Form', 'hotel-booking-for-woocommerce' ),
		description: __( 'Display the search form and set the results page.', 'hotel-booking-for-woocommerce' ),
		icon: HBFWC_ICON_SEARCH_FORM,
		category: HBFWC_BLOCK_CATEGORY,

		attributes: {
			page: {
				type: 'string',
				default: ''
			}
		},

		supports: {
			align: [ 'wide', 'full' ],
			html: false
		},

		edit: function( props ) {

			var attributes    = props.attributes;
			var setAttributes = props.setAttributes;
			var clientId      = props.clientId;

			var blockProps = useBlockProps();

			return createElement(

				'div',
				blockProps,

				createElement(
					Fragment,
					null,

					createElement(
						InspectorControls,
						null,

						createElement(
							PanelBody,
							{
								title: __( 'Settings', 'hotel-booking-for-woocommerce' ),
								initialOpen: true
							},

							createElement( TextControl, {
								label: __( 'Search results page', 'hotel-booking-for-woocommerce' ),
								help: __( 'Page ID or slug/path of the availability search results page.', 'hotel-booking-for-woocommerce' ),
								value: attributes.page || '',
								onChange: function( value ) {
									setAttributes( { page: value } );
								}
							} )

						)
					),

					renderReadonlyServerSidePreview(
						'hbfwc/search-form',
						attributes,
						clientId
					)

				)

			);

		},

		save: function() {
			return null;
		}

	} );

} )( window.wp );