( function ( wp ) {
	'use strict';

	if ( ! wp || ! wp.blocks || ! wp.element || ! wp.blockEditor || ! wp.components ) {
		return;
	}

	var registerBlockType = wp.blocks.registerBlockType;
	var createElement = wp.element.createElement;
	var useBlockProps = wp.blockEditor.useBlockProps;
	var InspectorControls = wp.blockEditor.InspectorControls;
	var PanelBody = wp.components.PanelBody;
	var SelectControl = wp.components.SelectControl;
	var TextControl = wp.components.TextControl;
	var ServerSideRender = wp.serverSideRender && ( wp.serverSideRender.default || wp.serverSideRender );
	var __ = wp.i18n.__;
	var config = window.wppsCfBlock || {};
	var fieldOptions = config.fields || [ { label: __( '— Select field —', 'wppowersuite-lite' ), value: '' } ];

	function parseSelection( selection ) {
		if ( ! selection || selection.indexOf( ':' ) === -1 ) {
			return { groupKey: '', fieldName: '' };
		}
		var parts = selection.split( ':' );
		return {
			groupKey: parts[ 0 ] || '',
			fieldName: parts[ 1 ] || ''
		};
	}

	registerBlockType( 'wp-powersuite/custom-field', {
		edit: function ( props ) {
			var attributes = props.attributes;
			var setAttributes = props.setAttributes;
			var selection = attributes.groupKey && attributes.fieldName
				? attributes.groupKey + ':' + attributes.fieldName
				: '';
			var blockProps = useBlockProps( { className: 'wpps-cf-block-preview' } );
			var preview = selection && ServerSideRender
				? createElement( ServerSideRender, {
					block: 'wp-powersuite/custom-field',
					attributes: attributes
				} )
				: createElement(
					'p',
					null,
					selection
						? __( 'Preview unavailable in the editor.', 'wppowersuite-lite' )
						: __( 'Select a custom field in the block settings.', 'wppowersuite-lite' )
				);

			return createElement(
				'div',
				blockProps,
				createElement(
					InspectorControls,
					null,
					createElement(
						PanelBody,
						{ title: __( 'PowerSuite Custom Field', 'wppowersuite-lite' ), initialOpen: true },
						createElement( SelectControl, {
							label: __( 'Custom Field', 'wppowersuite-lite' ),
							value: selection,
							options: fieldOptions,
							onChange: function ( value ) {
								var parsed = parseSelection( value );
								setAttributes( {
									groupKey: parsed.groupKey,
									fieldName: parsed.fieldName
								} );
							}
						} ),
						createElement( SelectControl, {
							label: __( 'Output', 'wppowersuite-lite' ),
							value: attributes.format || 'display',
							options: [
								{ label: __( 'Display value', 'wppowersuite-lite' ), value: 'display' },
								{ label: __( 'Plain text', 'wppowersuite-lite' ), value: 'text' },
								{ label: __( 'HTML', 'wppowersuite-lite' ), value: 'html' },
								{ label: __( 'URL', 'wppowersuite-lite' ), value: 'url' },
								{ label: __( 'Raw stored value', 'wppowersuite-lite' ), value: 'raw' }
							],
							onChange: function ( value ) {
								setAttributes( { format: value } );
							}
						} ),
						createElement( TextControl, {
							label: __( 'Default value', 'wppowersuite-lite' ),
							value: attributes.defaultValue || '',
							help: __( 'Shown when the selected field has no saved value.', 'wppowersuite-lite' ),
							__next40pxDefaultSize: true,
							__nextHasNoMarginBottom: true,
							onChange: function ( value ) {
								setAttributes( { defaultValue: value } );
							}
						} )
					)
				),
				preview
			);
		},
		save: function () {
			return null;
		}
	} );
}( window.wp ) );
