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

const TABS = [
	{ key: 'fields', label: 'Fields' },
	{ key: 'options', label: 'WP Options' },
];

export default function SiteInfoConfigurator( { 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 === 'options' && (
					<OptionsSelector
						blockConfig={ block.config }
						onChange={ ( options ) => updateConfig( { options } ) }
					/>
				) }
			</div>
		</div>
	);
}