(function (editor, components, i18n, element, blocks, blockEditor, apiFetch) {
//( function( editor, components, i18n, element ) {
	if (!i18n || !element || !blocks || !blockEditor || !components || !apiFetch) {
		return;
	}
	//const { __ } = wp.i18n;
	const { __ } = i18n;
	//var el = wp.element.createElement;  //element.createElement;
	const  el = element.createElement;  //element.createElement;
	
	//var registerBlockType = wp.blocks.registerBlockType;
	const { registerBlockType } = blocks;
	
	//var InspectorControls = wp.blockEditor.InspectorControls;
	const { InspectorControls } = blockEditor;	
	const { useBlockProps } = blockEditor;
	
	const { TextControl, TextareaControl, RangeControl, RadioControl, ToggleControl, Button, Modal, Spinner } = components;
	//var TextControl = wp.components.TextControl;
	//var TextareaControl = wp.components.TextareaControl;
	//var RangeControl = wp.components.RangeControl;
	//var RadioControl = wp.components.RadioControl;
	//var ToggleControl = wp.components.ToggleControl;
	//var MenuItemsChoice  = wp.components.MenuItemsChoice;
	//const { Button, Modal, Spinner } = wp.components;
	//var ServerSideRender = wp.serverSideRender;
	//var apiFetch = wp.apiFetch;
	//const { useState, useEffect } = wp.element;	
	const { useState, useEffect } = element;	

	function calcv (jsonData) {
		let jsonObj = JSON.parse(jsonData);
		let ret = "";
		if (jsonObj==null) {
			ret = __( 'Sorry, this JSON can\'t be handled by the free JCI-Plugin. You might try the PRO-JCI.', 'json-content-importer');
		} else {
		let apiURL = jsonObj.url;
		let basenode = jsonObj.basenode;
		let template = jsonObj.template;
		 ret = __('Template is inserted in the Block-Settings. Try it  by clicking "Try Template" there, please', 'json-content-importer') + '\n\n' + __('Template', 'json-content-importer') + ':\n' + template + '\n\n' + __('URL', 'json-content-importer') + ': ' + apiURL + '\n' + __('Basenode', 'json-content-importer') + ': ' + basenode + '\n';
		}
		return ret;
	}
	
	function JCIFreeCustomServerSideRender(props) {
		var attributes = props.attributes;
		var [renderedContent, setRenderedContent] = useState(null);

		//wp.element.useEffect(function() {
		useEffect(function() {
			apiFetch({
				path: '/wp/jcifree/v1/post/block-renderer/',
				method: 'POST',
				data: { attributes: attributes }
			}).then(function(response) {
				//console.log(JSON.stringify(response, null, 4));
				if (response.renderedContent) {
					//console.log('response: '+ response.renderedContent);
					setRenderedContent(response.renderedContent);
				}
			})
			.catch(error => {
				console.error('Error fetching data:', error.message);
			});
		}, [attributes]);
		//}, [blockName, attributes]);
		return el('div', { dangerouslySetInnerHTML: { __html: (renderedContent) } });
	}	

	registerBlockType( 'jci/jcifree-block-script', { 
		apiVersion: 3,
		title: __( 'JSON Content Importer FREE', 'json-content-importer'),
		description: __( 'Block with API-data', 'json-content-importer'), 
 		icon: 'welcome-add-page', 
		category: 'widgets', 
		attributes: { 
			apiURL: {
				type: 'string',
				default: '/json-content-importer/json/gutenbergblockexample1.json',
			},
			template: {
				type: 'string',
				default: 'hello: {hello}<br>{exampledate}: {exampledate:datetime,"d.m.Y, H:i:s",0}<br>{exampletimestamp}: {exampletimestamp:datetime,"d.m.Y, H:i:s",10}<br>{subloop:level1:-1}start: {level1.start}<br>{subloop-array:level1.level2:-1}level2: {level1.level2.key}<br>{subloop:level1.level2.data:-1}id: {level1.level2.data.id}, type: {level1.level2.data.type}<br>{/subloop:level1.level2.data}{/subloop-array:level1.level2}{/subloop:level1}',
			},
			basenode: {
				type: 'string',
				default: '',
			},
			urlgettimeout: {
				type: 'string',
				default: '5',
			},
			numberofdisplayeditems: {
				type: 'string',
				default: '',
			},
			oneofthesewordsmustbein: {
				type: 'string',
				default: '',
			},
			oneofthesewordsmustbeindepth: {
				type: 'string',
				default: '',
			},
			oneofthesewordsmustnotbein: {
				type: 'string',
				default: '',
			},
			oneofthesewordsmustnotbeindepth: {
				type: 'string',
				default: '',
			},
			toggleswitch: {
				type: 'boolean',
				default: false,
			},
			toggleswitchshortcodeexec: {
				type: 'boolean',
				default: false,
			},
			toggleswitchexample: {
				type: 'boolean',
				default: false,
			},
			toggleswitchjson: {
				type: 'boolean',
				default: false,
			},
		},

		edit: function( props ) {
			var attributes = props.attributes;
			var apiURL = props.attributes.apiURL;
			var template = props.attributes.template;
			var basenode = props.attributes.basenode;
			var toggleswitch = props.attributes.toggleswitch;
			var toggleswitchexample = props.attributes.toggleswitchexample;
			var toggleswitchshortcodeexec = props.attributes.toggleswitchshortcodeexec;
			var toggleswitchjson = props.attributes.toggleswitchjson;
			var urlgettimeout = props.attributes.urlgettimeout;
			var numberofdisplayeditems = props.attributes.numberofdisplayeditems;
			var oneofthesewordsmustbein = props.attributes.oneofthesewordsmustbein;
			var oneofthesewordsmustbeindepth = props.attributes.oneofthesewordsmustbeindepth;
			var oneofthesewordsmustnotbein = props.attributes.oneofthesewordsmustnotbein;
			var oneofthesewordsmustnotbeindepth = props.attributes.oneofthesewordsmustnotbeindepth;
			var setAttributes = props.setAttributes;
			var attributes = props.attributes;
			
			const [ isOpen, setOpen ] = useState( false );
			const [ data, setData ] = useState( null );
			const [ isLoading, setLoading ] = useState( false );
			const [renderTrigger, setRenderTrigger] = useState(0);
			const [ buttonText, setButtonText ] = useState(__('Try Template','json-content-importer' ));
			
			const handleClickTryTemplate = () => {
				var templateNew = (props.attributes.template)
				if (templateNew.trim()==templateNew) {
					templateNew = templateNew + ' ';
				} else {
					templateNew = templateNew.trim();
				}
				props.setAttributes( { template: (templateNew) } );
			};
			
			const blockProps = useBlockProps({
				className: 'jci-free-block-wrapper',
				style: { 
					minHeight: '100px', 
					padding: '20px',
					border: '1px solid #ddd',
					backgroundColor: '#f9f9f9'
				}
			});			

			const openModal = () => {
				setOpen( true );
				setLoading( true );
				//	setButtonText("You clicked me");

			//const userToken = wpApiSettings.nonce;
			const userToken = window.wpApiSettings?.nonce;
			if (!userToken) {
				setLoading(false);
				setData(JSON.stringify({ template: '', url: apiURL, basenode }));
				return;
			}

			fetch('/wp-json/wp/jcifree/v1/get/crte/?url=' + encodeURIComponent(apiURL) + '&basenode='+ encodeURIComponent(basenode),
					{
						method: 'GET',
						headers: {
							'Authorization': `Bearer ${userToken}`,
							'Content-Type': 'application/json',
							'X-WP-Nonce': userToken
						}				
					}
				)
                .then(response => response.json())
                .then(jsonData => {
                    setData(jsonData);
                    setLoading(false);
					let jsonObj = JSON.parse(jsonData);
                    props.attributes.template = jsonObj.template;
                })
                .catch(error => {
                    console.error('Error requesting data:', error);
                    setLoading( false );
                });
			};
						
			const closeModal = () => setOpen( false );			
			
			return [
				el( InspectorControls, { key: 'inspector' },
					el( components.PanelBody, {
						title: __( 'Define API-URL and template to insert in block', 'json-content-importer' ),
						className: 'jci_free_block',
						initialOpen: true,
					},
						el( TextControl, {
							type: 'string',
							label: __( 'API-URL:', 'json-content-importer' ),
							help: __( 'if empty try: e1 for "example 1"', 'json-content-importer'),
							placeholder:  __( 'if empty try: e1', 'json-content-importer' ),		
							value: apiURL,
							onChange: function( newapiURL ) {
								props.setAttributes( { apiURL: newapiURL } );
							},
							key: 'apiURL'
						} ),
						el( ToggleControl, { 
							type: 'string',
							label: __( 'Show API answer', 'json-content-importer' ),
							//help : i18n.__( 'help' ),
							checked : !!toggleswitchjson,
							onChange: function( newtoggleswitchjson ) {
								props.setAttributes( { toggleswitchjson: newtoggleswitchjson } );
							},
							key: 'toggleswitchjson'
						} ), 
					el('div', { props },
						!isOpen && el(Button, { 
							isPrimary: true, 
							onClick: openModal, 
							key: 'openModalButton' }, 
							__('Create JCI-Template for JSON', 'json-content-importer' )),
						isOpen && el(Modal, { 
							title: ('Generate Template:'), 
							onRequestClose: closeModal, 
							key: 'modalWindow'
							},
						isLoading
							? el(Spinner, {
								key: 'spinner'}
							)
							: el('pre', {key: 'preData'}, calcv(data)),
						el(Button, { 
							isSecondary: true, 
							onClick: closeModal,
							key: 'closeModalButton'
							}, 'Close this window')
						)
					),
					el('div', { style: { height: '25px' }, key: 'divSpace1' }  ),
					el( ToggleControl, { // https://wordpress.org/gutenberg/handbook/components/toggle-control/
						type: 'string',
						label: __( 'Debugmode on / off', 'json-content-importer' ),
						checked : !!toggleswitch,
						onChange: function( newtoggleswitch ) {
							props.setAttributes( { toggleswitch: newtoggleswitch } );
						},
						key: 'toggleswitch'
					}  ), 
					el( ToggleControl, { // https://wordpress.org/gutenberg/handbook/components/toggle-control/
						type: 'string',
						label: __( 'Welcome on / off', 'json-content-importer' ),
						//help : i18n.__( 'help' ),
						checked : !!toggleswitchexample,
						onChange: function( newtoggleswitchexample ) {
							props.setAttributes( { toggleswitchexample: newtoggleswitchexample } );
						},
						key: 'toggleswitchexample'
					}  ), 
					el( ToggleControl, { 
						type: 'string',
						label: __( 'Execute Shortcodes in Template' ),
						checked : !!toggleswitchshortcodeexec,
						onChange: function( newtoggleswitchshortcodeexec ) {
							props.setAttributes( { toggleswitchshortcodeexec: newtoggleswitchshortcodeexec } );
						},
						key: 'toggleswitchshortcodeexec'
					}  ), 
    				el( TextControl, {
						type: 'string',
						label: __( 'Basenode (JSON-node to start):', 'json-content-importer' ),
						help : __( 'if empty and initial example URL: level1', 'json-content-importer' ),
						placeholder:  __( 'if empty and above example URL: level1', 'json-content-importer' ),		
						value: basenode,
						onChange: function( newBasenode ) {
							props.setAttributes( { basenode: newBasenode } );
						},
						key: 'basenode'
					}  ),
					el(
						Button,
						{
							isPrimary: true,
							onClick: handleClickTryTemplate,
							key: 'tryTemplateButton'
						},
						buttonText
					),
					el('div', { style: { height: '25px' }, key: 'divSpace2' } ),
					el( TextareaControl, {
						type: 'string',
						label: __( 'Template to use for JSON:', 'json-content-importer' ),
						placeholder:  __( 'if emtpy: Click "Create JCI-Template for JSON" on the left side', 'json-content-importer' ),		
						help : __( 'Use {subloop}, {subloop-array}, {field} etc. just like in the shortcode', 'json-content-importer' ),
						rows: 10,
						value: template,
						onChange: function( newTemplate ) {
								props.setAttributes( { template: newTemplate } );
						},
						key: 'template'
					} ),
					el(
						Button,
						{
							isPrimary: true,
							onClick: function() {
								window.open('https://doc.json-content-importer.com', '_blank');
							},
							key: 'openManualButton'							
						},
						 __( 'Open JCI-Manual', 'json-content-importer' )
					),
				),
				el( components.PanelBody, {
					title: __( 'JCI Advanced', 'json-content-importer' ),
						className: 'jci_free_block',
						initialOpen: false,
					},
    				el( TextControl, {
						type: 'string',
						label: __( 'Number of seconds waiting for the API:', 'json-content-importer' ),
						placeholder: __( 'default: 5 seconds', 'json-content-importer' ),		
						//help : __( 'Number of seconds waiting for the API', 'json-content-importer' ),
						value: urlgettimeout,
						onChange: function( newurlgettimeout ) {
							props.setAttributes( { urlgettimeout: newurlgettimeout } );
						},
						key: 'urlgettimeout'
					} ),
    				el( TextControl, {
						type: 'string',
						label: __( 'Number of json-top-level-items to display:', 'json-content-importer' ),
						placeholder:  __( 'default: all', 'json-content-importer' ),		
						value: numberofdisplayeditems,
						onChange: function( newnumberofdisplayeditems ) {
							props.setAttributes( { numberofdisplayeditems: newnumberofdisplayeditems } );
						},
						key: 'numberofdisplayeditems'
					} ),
					el( TextControl, {
						type: 'string',
						label: __( 'One of these words must be displayed:', 'json-content-importer' ),
						placeholder:  __( 'default: empty', 'json-content-importer' ),		
						value: oneofthesewordsmustbein,
						onChange: function( newoneofthesewordsmustbein ) {
							props.setAttributes( { oneofthesewordsmustbein: newoneofthesewordsmustbein } );
						},
						key: 'oneofthesewordsmustbein'
					}  ),
    				el( TextControl, {
						type: 'string',
						label: __( 'JSON-depth of the above displayed Words:', 'json-content-importer' ),
						placeholder:  __( 'default: empty', 'json-content-importer' ),		
						value: oneofthesewordsmustbeindepth,
						onChange: function( newoneofthesewordsmustbeindepth ) {
							props.setAttributes( { oneofthesewordsmustbeindepth: newoneofthesewordsmustbeindepth } );
						},
						key: 'oneofthesewordsmustbeindepth'
					} ),
    				el( TextControl, {
						type: 'string',
						label: __( 'NONE of these words must be displayed:', 'json-content-importer' ),
						placeholder:  __( 'default: empty', 'json-content-importer' ),		
						value: oneofthesewordsmustnotbein,
						onChange: function( newoneofthesewordsmustnotbein ) {
							props.setAttributes( { oneofthesewordsmustnotbein: newoneofthesewordsmustnotbein } );
						},
						key: 'oneofthesewordsmustnotbein'
					}  ),
    				el( TextControl, {
						type: 'string',
						label: __( 'JSON-depth of the above NOT displayed Words:', 'json-content-importer' ),
						placeholder:  __( 'default: empty', 'json-content-importer' ),		
						value: oneofthesewordsmustnotbeindepth,
						onChange: function( newoneofthesewordsmustnotbeindepth ) {
							props.setAttributes( { oneofthesewordsmustnotbeindepth: newoneofthesewordsmustnotbeindepth } );
						},
						key: 'oneofthesewordsmustnotbeindepth'
					} ),
				),
			),
			el('div', blockProps,  // Hier blockProps verwenden statt manuellem style
				el(JCIFreeCustomServerSideRender, {
					attributes: attributes,
					key: 'jciFreecustomServerSideRender'
				})
			)
		];
		},
		
		save: function() {
			return null;
		},
	} );

//} )(
//	window.wp.editor,
//	window.wp.components,
//	window.wp.i18n,
//	window.wp.element,
//);
})(window.wp?.editor, window.wp?.components, window.wp?.i18n, window.wp?.element, window.wp?.blocks, window.wp?.blockEditor, window.wp?.apiFetch);
