import { useMemo, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ComboboxControl } from '@wordpress/components';
import { Search, ChevronRight } from 'lucide-react';
import { buildSearchIndex } from '../search-index';

function highlight( label, query ) {
	const i = label.toLowerCase().indexOf( query.toLowerCase() );
	if ( ! query || -1 === i ) {
		return label;
	}

	return (
		<>
			{ label.slice( 0, i ) }
			<strong>{ label.slice( i, i + query.length ) }</strong>
			{ label.slice( i + query.length ) }
		</>
	);
}

export function SearchBox( { tabs, onNavigate } ) {
	const [ value, setValue ] = useState( null );
	const [ query, setQuery ] = useState( '' );

	const options = useMemo(
		() =>
			buildSearchIndex( tabs ).map( ( item ) => ( {
				value: item.id,
				label: item.label,
				tabKey: item.tabKey,
				tabLabel: item.tabLabel,
				groupLabel: item.groupLabel,
			} ) ),
		[ tabs ]
	);

	return (
		<div className="advads-settings-search relative ml-4 max-w-md flex-1">
			<Search className="pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2 text-gray-400" />
			<ComboboxControl
				label={ __( 'Search settings', 'advanced-ads' ) }
				hideLabelFromVision
				placeholder={ __( 'Search settings…', 'advanced-ads' ) }
				expandOnFocus={ false }
				allowReset={ false }
				value={ value }
				options={ options }
				onFilterValueChange={ setQuery }
				onChange={ ( id ) => {
					const option = options.find( ( o ) => o.value === id );
					if ( option ) {
						onNavigate( option.tabKey, option.value );
					}
					setValue( null );
				} }
				__experimentalRenderItem={ ( { item } ) => (
					<span className="flex w-full items-center justify-between gap-4 px-4 py-2.5 text-sm">
						<span className="text-gray-700">
							{ highlight( item.label, query ) }
						</span>
						<span className="flex shrink-0 items-center gap-1 text-xs text-gray-400">
							{ item.tabLabel }
							<ChevronRight className="size-3" />
							{ item.groupLabel }
						</span>
					</span>
				) }
			/>
		</div>
	);
}