/**
 * Donor Wall — editor script.
 *
 * @package AmbassadorHub\Fundraisers\Blocks\DonorWall
 */
( function ( wp ) {
	'use strict';

	var __                = wp.i18n.__;
	var el                = wp.element.createElement;
	var Fragment          = wp.element.Fragment;
	var InspectorControls = wp.blockEditor.InspectorControls;
	var PanelBody         = wp.components.PanelBody;
	var RangeControl      = wp.components.RangeControl;
	var TextControl       = wp.components.TextControl;
	var ToggleControl     = wp.components.ToggleControl;
	var ServerSideRender  = wp.serverSideRender;

	wp.blocks.registerBlockType( 'ambassadorhub/donor-wall', {

		edit: function ( props ) {
			var attrs       = props.attributes;
			var set         = props.setAttributes;
			var maxItems    = typeof attrs.maxItems === 'number' ? attrs.maxItems : 50;
			var columns     = typeof attrs.columns  === 'number' ? attrs.columns  : 5;
			var showAmounts = attrs.showAmounts || false;
			var title       = attrs.title  || '';
			var blockProps  = wp.blockEditor.useBlockProps();

			return el(
				Fragment,
				null,

				el( InspectorControls, null,
					el( PanelBody, { title: __( 'Donor Wall settings', 'ambassadorhub' ), initialOpen: true },

						el( TextControl, {
							label:    __( 'Section title (optional)', 'ambassadorhub' ),
							value:    title,
							onChange: function ( v ) { set( { title: v } ); },
						} ),

						el( RangeControl, {
							label:    __( 'Columns', 'ambassadorhub' ),
							value:    columns,
							min:      2,
							max:      10,
							step:     1,
							onChange: function ( v ) { set( { columns: v || 5 } ); },
						} ),

						el( RangeControl, {
							label:    __( 'Max donors shown', 'ambassadorhub' ),
							value:    maxItems,
							min:      4,
							max:      200,
							step:     4,
							onChange: function ( v ) { set( { maxItems: v || 50 } ); },
						} ),

						el( ToggleControl, {
							label:    __( 'Show donation amounts', 'ambassadorhub' ),
							checked:  showAmounts,
							onChange: function ( v ) { set( { showAmounts: v } ); },
						} )
					)
				),

				el( 'div', blockProps,
					el( ServerSideRender, {
						block:      'ambassadorhub/donor-wall',
						attributes: attrs,
					} )
				)
			);
		},

		save: function () {
			return null;
		},
	} );

} )( window.wp );
