/**
 * SearchInput – suggestion-scoped search input (primitive)
 *
 * Single input bound to suggestions context: query, setQuery, focus opens dropdown,
 * keydown ArrowUp/Down/Enter/Escape delegates to context. Overridable via className/style.
 */
import React, { useRef, useCallback, useEffect } from "react";
import { useSuggestionsContext } from "./SuggestionsContext";
import { clsx } from "clsx";
import { ensureSeekoraStyles } from "../../styles/inject";
export function SearchInput({ placeholder = "Powered by Seekora", autoFocus = false, showClearButton = true, closeOnBlur = true, leftIcon, className, style, inputClassName, inputStyle, ariaLabel = "Search", }) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const { query, setQuery, isOpen, setIsOpen, navigateNext, navigatePrev, selectActive, close, } = useSuggestionsContext();
    const inputRef = useRef(null);
    const handleFocus = useCallback(() => {
        setIsOpen(true);
    }, [setIsOpen]);
    const handleBlur = useCallback(() => {
        if (!closeOnBlur)
            return;
        setTimeout(() => close(), 200);
    }, [close, closeOnBlur]);
    const handleChange = useCallback((e) => {
        setQuery(e.target.value);
    }, [setQuery]);
    const handleKeyDown = useCallback((e) => {
        if (e.key === "ArrowDown") {
            e.preventDefault();
            navigateNext();
            return;
        }
        if (e.key === "ArrowUp") {
            e.preventDefault();
            navigatePrev();
            return;
        }
        if (e.key === "Enter") {
            e.preventDefault();
            selectActive();
            return;
        }
        if (e.key === "Escape") {
            e.preventDefault();
            close();
            inputRef.current?.blur();
            return;
        }
    }, [navigateNext, navigatePrev, selectActive, close]);
    const handleClear = useCallback(() => {
        setQuery("");
        inputRef.current?.focus();
    }, [setQuery]);
    return (React.createElement("div", { className: clsx("seekora-search-input", className), style: style },
        React.createElement("div", { className: "seekora-search-input__field" },
            leftIcon ? (React.createElement("span", { className: "seekora-search-input__icon" }, leftIcon)) : null,
            React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder, autoFocus: autoFocus, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-autocomplete": "list", role: "combobox", className: clsx("seekora-search-input__input", inputClassName), style: inputStyle }),
            showClearButton && query ? (React.createElement("button", { type: "button", onClick: handleClear, className: "seekora-search-input__clear", "aria-label": "Clear search" },
                React.createElement(ClearIcon, null))) : null)));
}
function ClearIcon() {
    return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": true },
        React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" })));
}
