import { useState } from '@wordpress/element';
import { SelectControl } from '@wordpress/components';
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 PostsConfigurator( { block, definition, dispatch } ) {
	const postTypes = window.wlconduitData?.postTypes || [];
	const [ activeTab, setActiveTab ] = useState( 'fields' );

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

	return (
		<div className="aic-configurator">
			<SelectControl
				label="Post Type"
				value={ block.config.post_type || 'post' }
				options={ postTypes.map( ( pt ) => ( {
					label: pt.internal ? `${ pt.label } (internal)` : pt.label,
					value: pt.name,
				} ) ) }
				onChange={ ( val ) => updateConfig( {
					post_type: val,
					taxonomies: {},
					meta_keys: {},
				} ) }
			/>

			<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="post"
						onChange={ ( meta_keys ) => updateConfig( { meta_keys } ) }
					/>
				) }

				{ activeTab === 'taxonomies' && (
					<TaxonomySelector
						blockConfig={ block.config }
						objectType={ block.config.post_type || 'post' }
						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="posts"
						onChange={ ( joins ) => updateConfig( { joins } ) }
					/>
				) }
			</div>
		</div>
	);
}