import { useEffect, useRef, useState } from 'react';
import { Search } from 'lucide-react';
import './SearchSelect.css';

export type SearchSelectOption = {
    value: string;
    label: string;
};

/** `search` leads with a magnifier; `plain` is a bare field for a picker that also shows what is chosen. */
export type SearchSelectVariant = 'search' | 'plain';

type SearchSelectProps = {
    value: string;
    options: SearchSelectOption[];
    placeholder: string;
    ariaLabel: string;
    noResultsText: string;
    onValueChange: (value: string) => void;
    onSelect: (option: SearchSelectOption) => void;
    variant?: SearchSelectVariant;
    /** The current choice, shown in the empty field as a value rather than as a hint. */
    selectedLabel?: string;
    /** List every option before anything is typed, for a picker whose options are the whole choice. */
    listOnFocus?: boolean;
};

const SearchSelect = ({
    value,
    options,
    placeholder,
    ariaLabel,
    noResultsText,
    onValueChange,
    onSelect,
    variant = 'search',
    selectedLabel,
    listOnFocus = false,
}: SearchSelectProps) => {
    const [isOpen, setIsOpen] = useState(false);
    const [activeIndex, setActiveIndex] = useState(-1);
    const listboxId = useRef(`ahr-search-select-${Math.random().toString(36).slice(2)}`);
    const hasQuery = value.trim().length > 0;
    const mayList = hasQuery || listOnFocus;
    const showResults = isOpen && mayList;
    const hasSelection = Boolean(selectedLabel) && !hasQuery;
    const shownPlaceholder = selectedLabel || placeholder;
    const className = [
        'ahr-search-select',
        variant === 'plain' ? 'ahr-search-select--plain' : '',
        hasSelection ? 'ahr-search-select--has-selection' : '',
    ].filter(Boolean).join(' ');

    useEffect(() => {
        setActiveIndex(-1);
    }, [value, options.length]);

    const selectOption = (option: SearchSelectOption) => {
        onSelect(option);
        setIsOpen(false);
        setActiveIndex(-1);
    };

    return (
        <div
            className={className}
            onBlurCapture={(event) => {
                if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
                    setIsOpen(false);
                    setActiveIndex(-1);
                }
            }}
        >
            {variant === 'search' && (
                <Search
                    className="ahr-search-select__icon"
                    size={16}
                    aria-hidden="true"
                />
            )}
            <input
                className="ahr-search-select__input"
                type="search"
                value={value}
                placeholder={shownPlaceholder}
                // A narrow field may cut the text short; the whole of it stays one hover away.
                title={variant === 'plain' ? (value || selectedLabel || undefined) : undefined}
                aria-label={ariaLabel}
                role="combobox"
                aria-autocomplete="list"
                aria-expanded={showResults}
                aria-controls={showResults ? listboxId.current : undefined}
                aria-activedescendant={
                    showResults && activeIndex >= 0
                        ? `${listboxId.current}-option-${activeIndex}`
                        : undefined
                }
                autoComplete="off"
                autoCorrect="off"
                autoCapitalize="off"
                spellCheck={false}
                onFocus={() => {
                    if (mayList) {
                        setIsOpen(true);
                    }
                }}
                onClick={() => {
                    if (mayList) {
                        setIsOpen(true);
                    }
                }}
                onChange={(event) => {
                    const nextValue = event.target.value;
                    onValueChange(nextValue);
                    setIsOpen(listOnFocus || nextValue.trim().length > 0);
                }}
                onKeyDown={(event) => {
                    if (event.key === 'Escape') {
                        setIsOpen(false);
                        setActiveIndex(-1);
                        return;
                    }

                    if (!mayList || options.length === 0) {
                        return;
                    }

                    if (event.key === 'ArrowDown') {
                        event.preventDefault();
                        setIsOpen(true);
                        setActiveIndex((current) =>
                            current < options.length - 1 ? current + 1 : 0,
                        );
                        return;
                    }

                    if (event.key === 'ArrowUp') {
                        event.preventDefault();
                        setIsOpen(true);
                        setActiveIndex((current) =>
                            current > 0 ? current - 1 : options.length - 1,
                        );
                        return;
                    }

                    if (event.key === 'Enter' && activeIndex >= 0) {
                        event.preventDefault();
                        selectOption(options[activeIndex]);
                    }
                }}
            />

            {showResults && (
                <div
                    id={listboxId.current}
                    className="ahr-search-select__results"
                    role="listbox"
                    aria-label={ariaLabel}
                >
                    {options.length > 0 ? (
                        options.map((option, index) => (
                            <button
                                id={`${listboxId.current}-option-${index}`}
                                key={option.value}
                                type="button"
                                className="ahr-search-select__option"
                                role="option"
                                aria-selected={activeIndex === index}
                                onMouseDown={(event) => event.preventDefault()}
                                onMouseEnter={() => setActiveIndex(index)}
                                onClick={() => selectOption(option)}
                            >
                                {option.label}
                            </button>
                        ))
                    ) : (
                        <div className="ahr-search-select__empty">
                            {noResultsText}
                        </div>
                    )}
                </div>
            )}
        </div>
    );
};

export default SearchSelect;