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

	wp.blocks.registerBlockType( 'ambassadorhub/fundraiser-breadcrumb', {

		edit: function ( props ) {
			var attrs        = props.attributes;
			var set          = props.setAttributes;
			var showCampaign = attrs.showCampaign !== false;
			var showHome     = attrs.showHome     || false;
			var separator    = attrs.separator    || '›';
			var blockProps   = wp.blockEditor.useBlockProps();

			return el(
				Fragment,
				null,

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

						el( ToggleControl, {
							label:    __( 'Show campaign link', 'ambassadorhub' ),
							checked:  showCampaign,
							onChange: function ( v ) { set( { showCampaign: v } ); },
						} ),

						el( ToggleControl, {
							label:    __( 'Show home link', 'ambassadorhub' ),
							checked:  showHome,
							onChange: function ( v ) { set( { showHome: v } ); },
						} ),

						el( TextControl, {
							label:    __( 'Separator character', 'ambassadorhub' ),
							value:    separator,
							onChange: function ( v ) { set( { separator: v } ); },
						} )
					)
				),

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

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

} )( window.wp );
