/**
 * Activity Feed — editor script.
 *
 * @package AmbassadorHub\Fundraisers\Blocks\ActivityFeed
 */
( 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 ToggleControl     = wp.components.ToggleControl;
	var ServerSideRender  = wp.serverSideRender;

	wp.blocks.registerBlockType( 'ambassadorhub/activity-feed', {

		edit: function ( props ) {
			var attrs          = props.attributes;
			var set            = props.setAttributes;
			var showMessages   = attrs.showMessages  !== false;
			var showMilestones = attrs.showMilestones !== false;
			var blockProps     = wp.blockEditor.useBlockProps();

			return el(
				Fragment,
				null,

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

						el( ToggleControl, {
							label:    __( 'Show donor messages', 'ambassadorhub' ),
							checked:  showMessages,
							onChange: function ( v ) { set( { showMessages: v } ); },
						} ),

						el( ToggleControl, {
							label:    __( 'Show milestones', 'ambassadorhub' ),
							help:     __( 'Shows: fundraiser started, first donation, 25%/50%/75%/100% of goal. Donations between milestones are collapsed when there are more than 5.', 'ambassadorhub' ),
							checked:  showMilestones,
							onChange: function ( v ) { set( { showMilestones: v } ); },
						} )
					)
				),

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

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

} )( window.wp );
