var el = wp.element.createElement;
BlockControls = wp.editor.BlockControls,
AlignmentToolbar = wp.editor.AlignmentToolbar,
registerBlockType = wp.blocks.registerBlockType,
blockStyle = { backgroundColor: '#ccc', color: '#000', padding: '20px' };

var keys_attr = "";
if (keys_arr) {
	keys_attr = keys_arr;
}

var fst_sections = fudu_sections;
if ( fst_sections ) {
	jQuery( fst_sections ).each(function(key,value) {
		var key = key+1;
		var blockOptions = {
	   		title: value.sec_title,
		   	category: 'fudu-sections',
		   	attributes: keys_attr,
		   	edit: function( props ) {
				var className = props.className;
				var slug = value.slug;
			   
				if(props) {
					props.setAttributes( { slug:slug } );
				}

				return el(
					'div',
					{ className: className },
					el(
						'lable',
						{ for: value.sec_title }, value.sec_title
					)
				);
			},
		   	save: function(props) {
		       return null;
		   	},
		};
	
		if (value.icon) {
			blockOptions.icon = value.icon;
		};
		registerBlockType( 'fst-sections/section-'+key, blockOptions );
	});
}

var __ = wp.i18n.__;
var el = wp.element.createElement;
var withInspectorControls = wp.compose.createHigherOrderComponent( function( BlockEdit ) {
    return function( props ) {
    	var className = props.className;
    	var check_slug = props.attributes.slug ;

	    handleChange = name => newValue => {
	    	if (newValue!=undefined) {
		        if (newValue.url && props) {
		        	props.setAttributes({ [name]: newValue.url });
		        	jQuery('.'+name).html("<img src='"+newValue.url+"'>");
		        	jQuery(".image-block-btn").addClass("img-settings");
		        } else if (props) {
		          	props.setAttributes({ [name]: newValue });
		        }
		    } else {
		    	props.setAttributes({ [name]: newValue });
		    }    
	    };

	    RemoveblockMediaUploade = name => newValue => {
  			props.setAttributes({ [name]: "" });
		    jQuery('.'+name).html("<img src=''>");	  
	    }

		var fst_section_settings = [];	
		if (settings_arr) {
			jQuery( settings_arr ).each(function(setting_key,setting_val) {
				var setting_key = setting_val.key;
				var default_val = setting_val.default;

				if (props.attributes[setting_key] != "") {
					var value = props.attributes[setting_key] || default_val;
				}

				if (setting_val.slug == check_slug) {
					if ( setting_val.type == 'text' || setting_val.type == 'font_size' ) {
						fst_section_settings.push(el(wp.components.TextControl, {
									    				label: __(setting_val.label),
										                value: value,
													    onChange: handleChange(setting_key),
										            }),);
					} else if (setting_val.type == 'number') {
						fst_section_settings.push(el(wp.components.TextControl, {
									    				label: __(setting_val.label),
										                value: value,
										                type: 'number',
													    onChange: handleChange(setting_key),
										            }),);
					} else if (setting_val.type == 'textarea') {
						fst_section_settings.push(el(wp.components.TextareaControl , {
									    				label: __(setting_val.label+" / HTML" ),
										                value: value,
										                tagName: 'textarea',
										                rows:8,
													    onChange: handleChange(setting_key),
										            }),);
					} else if (setting_val.type == 'select' || setting_val.type == 'font_family') {
						var options_arr = [];
						var p = setting_val.option;
						for (var key in p) {
						  	options_arr.push( { value: key, label: p[key] },);
						}
						fst_section_settings.push(el( wp.components.SelectControl, {
													label: __(setting_val.label),
													value: value,
													options:  options_arr ,
													onChange: handleChange(setting_key),
												} ),);
					} else if (setting_val.type == 'color') {
						fst_section_settings.push( el( 'label', {}, __( setting_val.label ) )),
						fst_section_settings.push(el(wp.components.ColorPalette, {
						                            value: value,
						                            onChange: handleChange(setting_key),
						                        }
						                    )
										);
					} else if (setting_val.type == 'file') {
						fst_section_settings.push( el( 'label', {}, __( setting_val.label ) )),
						fst_section_settings.push(el(wp.editor.MediaUpload, {
												    onSelect: handleChange(setting_key),
												    type: 'image',
												    value:value,
												    render: function( obj ) {
						    								return el( wp.components.Button, {
						    									    className: 'components-icon-button image-block-btn is-button is-default is-large block-img-tag '+setting_key,
						    									    onClick: obj.open
						    									},
						    									el( 'img', { src: value,className:'remove-block-'+setting_key } ),
						    								);
						    							}
												    })
												);
						fst_section_settings.push(el(wp.editor.MediaUpload, {
												    type: 'button',
												    value:value,
												    render: function( obj ) {
						    							return el( 'button', {
						    									    className: 'components-button is-link is-destructive',
						    									    onClick: RemoveblockMediaUploade(setting_key),
						    									},
						    									__( "Remove Image" )
						    								);	
						    							}
												    })
												);
					} else if (setting_val.type == 'font_icon') {
						var icons_arr = [];
						var p = setting_val.font_icons;
						for (var key in p) {
						  	icons_arr.push( { value: key, label: key },);
						}
						fst_section_settings.push(el( wp.components.SelectControl, {
													label: __(setting_val.label),
													value: value,
													options:  icons_arr ,
													onChange: handleChange(setting_key),
												} ),);
					}
				}
			});
		}

		var fst_section_fields = [];
		if (fst_sections) {
			jQuery( fst_sections ).each(function(key,value) {
				if (value.slug == check_slug) {
					fst_section_fields.push(el(
			            wp.editor.InspectorControls,
			            {},
			            el(
			                wp.components.PanelBody,
			                {
				              	title: __(value.sec_title+" Setting"),
				              	className: "",
				              	initialOpen: true
				            },
				            fst_section_settings
			            ),
			          ) 
			        );
				}
			});
		}
		
	    if (check_slug) {
	    	return el(
	            wp.element.Fragment,
	            {},
	            el(
	                BlockEdit,
	                props
	            ),
	            fst_section_fields
	        );
	    } else {
	    	return el(
	            wp.element.Fragment,
	            {},
	            el(
	                BlockEdit,
	                props
	            ),
	        );
	    }
    };
}, 'withInspectorControls' );


wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin/with-inspector-controls', withInspectorControls );