/**
 * Fundraiser QR Code Block
 */
(function() {
	var el = wp.element.createElement;
	var registerBlockType = wp.blocks.registerBlockType;
	var ServerSideRender = wp.serverSideRender;
	var __ = wp.i18n.__;
	var InspectorControls = wp.blockEditor.InspectorControls;
	var PanelBody = wp.components.PanelBody;
	var RangeControl = wp.components.RangeControl;
	var TextControl = wp.components.TextControl;
	var Fragment = wp.element.Fragment;

	registerBlockType('ambassadorhub/qr-code', {
		edit: function(props) {
			var attributes = props.attributes;
			var setAttributes = props.setAttributes;
			var size = attributes.size;
			var queryParams = attributes.queryParams;
			var blockProps = wp.blockEditor.useBlockProps();

			return el(
				'div',
				blockProps,
				el(
					InspectorControls,
					{},
					el(
						PanelBody,
						{ title: __('QR Code instellingen', 'ambassador-fundraiser') },
						el(RangeControl, {
							label: __('Grootte (pixels)', 'ambassador-fundraiser'),
							value: size,
							onChange: function(value) {
								setAttributes({ size: value });
							},
							min: 100,
							max: 500,
							step: 10
						}),
						el(TextControl, {
							label: __('URL parameters (bijv. utm_source=qr&utm_medium=print)', 'ambassador-fundraiser'),
							value: queryParams,
							onChange: function(value) {
								setAttributes({ queryParams: value });
							},
							help: __('Voeg extra parameters toe aan de QR code URL voor tracking doeleinden.', 'ambassador-fundraiser')
						})
					)
				),
				el(ServerSideRender, {
					block: 'ambassadorhub/qr-code',
					attributes: attributes
				})
			);
		},
		save: function() {
			return null; // Server-side rendered
		}
	});
})();
