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

const TABS = [
	{ key: 'fields', label: 'Fields' },
	{ key: 'meta', label: 'Custom Fields' },
	{ key: 'taxonomies', label: 'Taxonomies' },
	{ key: 'filters', label: 'Filters' },
	{ key: 'joins', label: 'Joins' },
];

export default function UsersConfigurator( { block, definition, dispatch } ) {
	const [ activeTab, setActiveTab ] = useState( 'fields' );

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

	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">
				{ activeTab === 'fields' && (
					<FieldSelector
						available={ definition?.fields || {} }
						selected={ block.config.fields || [] }
						onChange={ ( fields ) => updateConfig( { fields } ) }
					/>
				) }

				{ activeTab === 'meta' && (
					<MetaKeySelector
						blockConfig={ block.config }
						objectType="user"
						onChange={ ( meta_keys ) => updateConfig( { meta_keys } ) }
					/>
				) }

				{ activeTab === 'taxonomies' && (
					<TaxonomySelector
						blockConfig={ block.config }
						objectType="user"
						onChange={ ( taxonomies ) => updateConfig( { taxonomies } ) }
					/>
				) }

				{ activeTab === 'filters' && (
					<FilterSelector
						available={ definition?.filters || {} }
						selected={ block.config.filters || {} }
						onChange={ ( filters ) => updateConfig( { filters } ) }
					/>
				) }

				{ activeTab === 'joins' && (
					<JoinSelector
						blockConfig={ block.config }
						blockType="users"
						onChange={ ( joins ) => updateConfig( { joins } ) }
					/>
				) }
			</div>
		</div>
	);
}