import * as React from 'react';
import { __ } from '@wordpress/i18n';
export interface SearchItem {
    key: string | number;
    name: string;
    description?: string;
}
/** Same accessible search behavior; callers supply only their permitted customer projection. */
export function Autocomplete<T>({ label, query, onQuery, load, item, onSelect, disabled = false, focus = false, refreshKey = '', selectedKeys = [], actionLabel, dismissKey = 0 }: {
    label: string;
    query: string;
    onQuery: (q: string) => void;
    load: (q: string) => Promise<T[]>;
    item: (value: T) => SearchItem;
    onSelect: (value: T) => void;
    disabled?: boolean;
    focus?: boolean;
    refreshKey?: string;
    selectedKeys?: Array<string | number>;
    actionLabel?: string;
    dismissKey?: number;
}) {
    const [rows, setRows] = React.useState<T[]>([]), [busy, setBusy] = React.useState(false), [error, setError] = React.useState(''), [active, setActive] = React.useState(-1), [open, setOpen] = React.useState(true);
    const id = React.useId();
    React.useEffect(() => { let alive = true; setRows([]); setActive(-1); setError(''); setBusy(false); if (query.trim().length < 2 || disabled)
        return; setBusy(true); const timer = setTimeout(() => load(query).then(value => { if (alive)
        setRows(value); }).catch(e => { if (alive)
        setError(e.message); }).finally(() => { if (alive)
        setBusy(false); }), 250); return () => { alive = false; clearTimeout(timer); }; }, [load, query, disabled, refreshKey]);
    React.useEffect(() => { if (dismissKey)
        setOpen(false); }, [dismissKey]);
    function choose(value: T) { if (selectedKeys.includes(item(value).key))
        return; onSelect(value); setOpen(false); setActive(-1); }
    return <div className="asb-autocomplete"><label>{label}<input data-asb-initial-focus={focus || undefined} aria-label={label} role="combobox" aria-autocomplete="list" aria-controls={id} aria-expanded={open && rows.length > 0} aria-activedescendant={open && active >= 0 ? `${id}-${active}` : undefined} value={query} disabled={disabled} maxLength={190} autoComplete="off" onFocus={() => setOpen(true)} onChange={e => { onQuery(e.target.value); setOpen(true); }} onKeyDown={e => { if (e.key === 'Escape' && open) {
        e.stopPropagation();
        setOpen(false);
    } if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
        e.preventDefault();
        setOpen(true);
        setActive(n => rows.length ? (n < 0 ? (e.key === 'ArrowDown' ? 0 : rows.length - 1) : (n + (e.key === 'ArrowDown' ? 1 : -1) + rows.length) % rows.length) : -1);
    } if (e.key === 'Enter' && open && active >= 0 && rows[active]) {
        e.preventDefault();
        choose(rows[active]);
    } }}/></label>
 {busy && <p role="status">{__('Searching…', 'abece-booking')}</p>}{error && <p role="alert">{error}</p>}{open && !busy && query.trim().length >= 2 && !rows.length && !error && <p role="status">{__('No matching customers.', 'abece-booking')}</p>}
 {open && rows.length > 0 && <ul id={id} role="listbox" aria-label={__('Search results', 'abece-booking')}>{rows.map((value, index) => { const result = item(value), chosen = selectedKeys.includes(result.key); return <li id={`${id}-${index}`} role="option" aria-selected={index === active} aria-disabled={chosen} key={result.key}><span>{result.name}{result.description && <small>{result.description}</small>}</span><button type="button" disabled={disabled || chosen} onClick={() => choose(value)}>{actionLabel || __('Select customer', 'abece-booking')}</button></li>; })}</ul>}
 </div>;
}