/**
 * Sprint 11 PR 1 — Gutenberg editor JS for the Seekmodo Quiz block.
 *
 * See `blocks/src/search/index.js` for the design rationale.
 */
( function ( wp ) {
	if ( ! wp || ! wp.blocks || ! wp.element || ! wp.blockEditor ) {
		return;
	}

	var el = wp.element.createElement;
	var Fragment = wp.element.Fragment;
	var registerBlockType = wp.blocks.registerBlockType;
	var useBlockProps = wp.blockEditor.useBlockProps;
	var InspectorControls = wp.blockEditor.InspectorControls;
	var Components = wp.components || {};
	var PanelBody = Components.PanelBody || function ( props ) { return el( 'div', null, props.children ); };
	var TextControl = Components.TextControl || function () { return null; };
	var TextareaControl = Components.TextareaControl || TextControl;
	var ToggleControl = Components.ToggleControl || function () { return null; };
	var __ = ( wp.i18n && wp.i18n.__ ) ? wp.i18n.__ : function ( s ) { return s; };

	registerBlockType( 'seekmodo/quiz', {
		edit: function ( props ) {
			var attrs = props.attributes;
			var setAttr = function ( key ) {
				return function ( value ) {
					var update = {};
					update[ key ] = value;
					props.setAttributes( update );
				};
			};
			var label = attrs.quizSlug || attrs.quizId || __( 'Configure a quiz ID, slug, or definition source', 'seekmodo-wordpress' );

			return el(
				Fragment,
				null,
				el(
					InspectorControls,
					null,
					el(
						PanelBody,
						{ title: __( 'Seekmodo Quiz', 'seekmodo-wordpress' ), initialOpen: true },
						el( TextControl, {
							label: __( 'Quiz ID', 'seekmodo-wordpress' ),
							value: attrs.quizId || '',
							onChange: setAttr( 'quizId' )
						} ),
						el( TextControl, {
							label: __( 'Quiz slug', 'seekmodo-wordpress' ),
							value: attrs.quizSlug || '',
							onChange: setAttr( 'quizSlug' )
						} ),
						el( TextControl, {
							label: __( 'Definition source selector', 'seekmodo-wordpress' ),
							help: __( 'CSS selector pointing to a <script type="application/json"> block carrying the quiz definition.', 'seekmodo-wordpress' ),
							value: attrs.definitionSrc || '',
							onChange: setAttr( 'definitionSrc' )
						} ),
						el( TextareaControl, {
							label: __( 'Inline definition (JSON)', 'seekmodo-wordpress' ),
							help: __( 'Use the source-selector path for any non-trivial quiz.', 'seekmodo-wordpress' ),
							value: attrs.inlineDefinition || '',
							onChange: setAttr( 'inlineDefinition' )
						} ),
						el( ToggleControl, {
							label: __( 'Auto-start past intro screen', 'seekmodo-wordpress' ),
							checked: !! attrs.autoStart,
							onChange: setAttr( 'autoStart' )
						} )
					)
				),
				el(
					'div',
					useBlockProps( {
						style: {
							border: '1px dashed #c3c4c7',
							borderRadius: 6,
							padding: 12,
							background: '#fff'
						}
					} ),
					el( 'div', { style: { fontSize: 11, color: '#6c7781', marginBottom: 6 } }, __( 'Seekmodo \u00b7 Quiz', 'seekmodo-wordpress' ) ),
					el( 'div', { style: { color: '#374151' } }, label )
				)
			);
		},
		save: function () {
			return null;
		}
	} );
} )( window.wp );
