/**
 * Editor for the acrwd/balance block. Rendered server-side (render_callback
 * shares Shortcodes::render_balance); the editor shows a static placeholder
 * because the real output depends on the logged-in customer, plus a toggle for
 * the "label" attribute. Vanilla JS, no build.
 */
( function ( wp ) {
	'use strict';

	var el = wp.element.createElement;
	var Fragment = wp.element.Fragment;
	var i18n = wp.i18n;
	var blockEditor = wp.blockEditor || {};
	var components = wp.components || {};
	var InspectorControls = blockEditor.InspectorControls;
	var PanelBody = components.PanelBody;
	var ToggleControl = components.ToggleControl;

	var placeholderStyle = {
		padding: '8px 12px',
		background: '#f6f7f8',
		border: '1px dashed #c3c4c7',
		borderRadius: '4px'
	};

	wp.blocks.registerBlockType( 'acrwd/balance', {
		edit: function ( props ) {
			var placeholder = el(
				'div',
				{ className: 'acrwd-block-placeholder', style: placeholderStyle },
				i18n.__( 'Points balance — shows the logged-in customer’s balance here.', 'australcode-points-rewards' )
			);

			if ( ! InspectorControls || ! PanelBody || ! ToggleControl ) {
				return placeholder;
			}

			return el(
				Fragment,
				{},
				el(
					InspectorControls,
					{},
					el(
						PanelBody,
						{ title: i18n.__( 'Settings', 'australcode-points-rewards' ), initialOpen: true },
						el( ToggleControl, {
							label: i18n.__( 'Show points label', 'australcode-points-rewards' ),
							checked: props.attributes.label !== 'no',
							onChange: function ( on ) {
								props.setAttributes( { label: on ? 'yes' : 'no' } );
							}
						} )
					)
				),
				placeholder
			);
		},
		save: function () {
			return null;
		}
	} );
}( window.wp ) );
