/**
 * Editor for the acrwd/earn-message block. Rendered server-side (render_callback
 * shares Shortcodes::render_earn_message); the editor shows a static placeholder
 * because the figure depends on the product context, plus a control for the
 * optional product_id (0 = the current product). 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 TextControl = components.TextControl;

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

	wp.blocks.registerBlockType( 'acrwd/earn-message', {
		edit: function ( props ) {
			var placeholder = el(
				'div',
				{ className: 'acrwd-block-placeholder', style: placeholderStyle },
				i18n.__( 'Earn points message — shows the points a product earns here.', 'australcode-points-rewards' )
			);

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

			return el(
				Fragment,
				{},
				el(
					InspectorControls,
					{},
					el(
						PanelBody,
						{ title: i18n.__( 'Settings', 'australcode-points-rewards' ), initialOpen: true },
						el( TextControl, {
							label: i18n.__( 'Product ID (0 = current product)', 'australcode-points-rewards' ),
							type: 'number',
							value: props.attributes.product_id,
							onChange: function ( value ) {
								props.setAttributes( { product_id: parseInt( value, 10 ) || 0 } );
							}
						} )
					)
				),
				placeholder
			);
		},
		save: function () {
			return null;
		}
	} );
}( window.wp ) );
