import PostsConfigurator from './configurators/PostsConfigurator';
import UsersConfigurator from './configurators/UsersConfigurator';
import SiteInfoConfigurator from './configurators/SiteInfoConfigurator';
import CommentsConfigurator from './configurators/CommentsConfigurator';
import GenericConfigurator from './configurators/GenericConfigurator';

const CORE_CONFIGURATORS = {
	posts: PostsConfigurator,
	users: UsersConfigurator,
	site_info: SiteInfoConfigurator,
	comments: CommentsConfigurator,
};

// Add-on registration APIs on window.wlconduitData.
window.wlconduitData = window.wlconduitData || {};
window.wlconduitData.configurators = window.wlconduitData.configurators || {};

/**
 * Advanced: Register a full custom React component as configurator.
 * Core block types cannot be overridden.
 */
window.wlconduitData.registerConfigurator = function ( blockType, component ) {
	if ( CORE_CONFIGURATORS[ blockType ] ) {
		return;
	}
	window.wlconduitData.configurators[ blockType ] = component;
};

/**
 * Simple: Create a configurator from a config object.
 * No React knowledge needed — just describe the tabs.
 *
 * Example:
 *   window.wlconduitData.createConfigurator('wc_orders', {
 *       tabs: [
 *           { key: 'fields', label: 'Fields', type: 'field-selector' },
 *           { key: 'meta', label: 'Custom Fields', type: 'meta-selector', endpoint: 'order-meta-keys' },
 *           { key: 'filters', label: 'Filters', type: 'filter-selector' },
 *       ]
 *   });
 */
window.wlconduitData.createConfigurator = function ( blockType, config ) {
	if ( CORE_CONFIGURATORS[ blockType ] ) {
		return;
	}
	const tabs = config.tabs || [];
	window.wlconduitData.configurators[ blockType ] = function ( props ) {
		return <GenericConfigurator { ...props } tabs={ tabs } />;
	};
};

export default function BlockConfigurator( { block, definition, dispatch } ) {
	const Configurator =
		CORE_CONFIGURATORS[ block.block_type ] ||
		window.wlconduitData.configurators[ block.block_type ];

	if ( ! Configurator ) {
		return <p>No configurator available for block type: { block.block_type }</p>;
	}

	return <Configurator block={ block } definition={ definition } dispatch={ dispatch } />;
}