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

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

export default function CommentsConfigurator( { 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 === 'filters' && (
					<FilterSelector
						available={ definition?.filters || {} }
						selected={ block.config.filters || {} }
						onChange={ ( filters ) => updateConfig( { filters } ) }
					/>
				) }

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