/**
 * IGIT Related Posts – Gutenberg Block
 *
 * Server-side rendered block.
 * The editor shows an interactive preview fetched via ServerSideRender.
 */
( function ( blocks, element, components, blockEditor, serverSideRender ) {
	'use strict';

	var el                = element.createElement;
	var Fragment          = element.Fragment;
	var ServerSideRender  = serverSideRender;
	var InspectorControls = blockEditor.InspectorControls;
	var PanelBody         = components.PanelBody;
	var RangeControl      = components.RangeControl;
	var SelectControl     = components.SelectControl;

	blocks.registerBlockType( 'igit-rpwt/related-posts', {
		edit: function ( props ) {
			var attributes = props.attributes;
			var setAttributes = props.setAttributes;

			return el(
				Fragment,
				null,
				el(
					InspectorControls,
					null,
					el(
						PanelBody,
						{ title: 'Related Posts Settings', initialOpen: true },
						el( RangeControl, {
							label: 'Number of Posts',
							value: attributes.postCount,
							onChange: function ( val ) {
								setAttributes( { postCount: val } );
							},
							min: 1,
							max: 12,
						} ),
						el( SelectControl, {
							label: 'Layout',
							value: attributes.layout,
							options: [
								{ label: 'Grid', value: 'grid' },
								{ label: 'List', value: 'list' },
							],
							onChange: function ( val ) {
								setAttributes( { layout: val } );
							},
						} )
					)
				),
				el( ServerSideRender, {
					block: 'igit-rpwt/related-posts',
					attributes: attributes,
				} )
			);
		},

		// Rendered server-side; save returns null.
		save: function () {
			return null;
		},
	} );

} )(
	window.wp.blocks,
	window.wp.element,
	window.wp.components,
	window.wp.blockEditor,
	window.wp.serverSideRender
);
