import { useState } from '@wordpress/element';
import FieldSelector from '../FieldSelector';
import MetaKeySelector from '../MetaKeySelector';
import TaxonomySelector from '../TaxonomySelector';
import FilterSelector from '../FilterSelector';
import OptionsSelector from '../OptionsSelector';
import JoinSelector from '../JoinSelector';

const TAB_COMPONENTS = {
	'field-selector': function FieldTab( { block, definition, updateConfig } ) {
		return (
			<FieldSelector
				available={ definition?.fields || {} }
				selected={ block.config.fields || [] }
				onChange={ ( fields ) => updateConfig( { fields } ) }
			/>
		);
	},
	'meta-selector': function MetaTab( { block, updateConfig, tabConfig } ) {
		return (
			<MetaKeySelector
				blockConfig={ block.config }
				objectType={ tabConfig.objectType || 'post' }
				endpoint={ tabConfig.endpoint }
				onChange={ ( meta_keys ) => updateConfig( { meta_keys } ) }
			/>
		);
	},
	'taxonomy-selector': function TaxonomyTab( { block, updateConfig, tabConfig } ) {
		return (
			<TaxonomySelector
				blockConfig={ block.config }
				objectType={ tabConfig.objectType || block.config.post_type || 'post' }
				endpoint={ tabConfig.endpoint }
				onChange={ ( taxonomies ) => updateConfig( { taxonomies } ) }
			/>
		);
	},
	'filter-selector': function FilterTab( { block, definition, updateConfig } ) {
		return (
			<FilterSelector
				available={ definition?.filters || {} }
				selected={ block.config.filters || {} }
				onChange={ ( filters ) => updateConfig( { filters } ) }
			/>
		);
	},
	'options-selector': function OptionsTab( { block, updateConfig } ) {
		return (
			<OptionsSelector
				blockConfig={ block.config }
				onChange={ ( options ) => updateConfig( { options } ) }
			/>
		);
	},
	'join-selector': function JoinTab( { block, updateConfig, tabConfig } ) {
		return (
			<JoinSelector
				blockConfig={ block.config }
				blockType={ tabConfig.blockType || block.block_type }
				onChange={ ( joins ) => updateConfig( { joins } ) }
			/>
		);
	},
};

export default function GenericConfigurator( { block, definition, dispatch, tabs } ) {
	const [ activeTab, setActiveTab ] = useState( tabs[ 0 ]?.key || 'fields' );

	function updateConfig( partial ) {
		dispatch( {
			type: 'UPDATE_BLOCK_CONFIG',
			payload: { id: block.id, config: partial },
		} );
	}

	const activeTabConfig = tabs.find( ( t ) => t.key === activeTab );
	const TabComponent = activeTabConfig ? TAB_COMPONENTS[ activeTabConfig.type ] : null;

	return (
		<div className="aic-configurator">
			<div className="aic-configurator-tabs">
				{ tabs.map( ( tab ) => (
					<button
						key={ tab.key }
						type="button"
						className={ `aic-tab ${ activeTab === tab.key ? 'aic-tab--active' : '' }` }
						onClick={ () => setActiveTab( tab.key ) }
					>
						{ tab.label }
					</button>
				) ) }
			</div>

			<div className="aic-configurator-content">
				{ TabComponent && (
					<TabComponent
						block={ block }
						definition={ definition }
						updateConfig={ updateConfig }
						tabConfig={ activeTabConfig }
					/>
				) }
			</div>
		</div>
	);
}