( function( wp ) {
	const { createElement, Fragment } = wp.element;
	const { addFilter } = wp.hooks;
	const { InspectorControls } = wp.blockEditor;
	const { PanelBody, SelectControl } = wp.components;

	const setorOptions = [
		{ label: 'Selecione um setor...', value: '' },
		{ label: 'Indústria', value: 'industria' },
		{ label: 'Farmacêutico', value: 'farmaceutico' },
		{ label: 'Financeiro', value: 'financeiro' },
		{ label: 'Público', value: 'publico' },
	];

	function adicionarPainelSetor( BlockEdit ) {
		return function( props ) {
			if ( props.name !== 'core/columns' ) {
				return createElement( BlockEdit, props );
			}

			const { attributes, setAttributes } = props;
			let setorSelecionado = attributes.setor || '';

			// Se o atributo "setor" não estiver definido, mas a className contiver a classe correspondente,
			// extrai o slug e atualiza o atributo para que o select mostre o valor correto.
			if ( !setorSelecionado && attributes.className ) {
				const classPrefix = 'is-setor-';
				const match = attributes.className.match(new RegExp(`${ classPrefix }(\\S+)`));
				if ( match && match[1] ) {
					setorSelecionado = match[1];
					setAttributes({ setor: setorSelecionado });
				}
			}

			return createElement( Fragment, {},
				createElement( BlockEdit, props ),
				createElement( InspectorControls, { key: 'inspector' },
					createElement( PanelBody, { title: 'Filtragem' },
						createElement( SelectControl, {
							label: 'Setor',
							value: setorSelecionado,
							options: setorOptions,
							onChange: ( value ) => {
								setAttributes({ setor: value });
								// Atualiza as classes: remove as classes antigas e adiciona a nova
								const classPrefix = 'is-setor-';
								let classes = attributes.className ? attributes.className.split(' ') : [];
								classes = classes.filter( ( classe ) => ! classe.startsWith( classPrefix ) );
								if ( value ) {
									classes.push( `${ classPrefix }${ value }` );
								}
								setAttributes({ className: classes.join(' ') });
							}
						} )
					)
				)
			);
		};
	}

	addFilter(
		'editor.BlockEdit',
		'ninodem/columns-setor-inspector',
		adicionarPainelSetor
	);

} )( window.wp );
