/**
 * 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 } from 'react';
import { useSuggestionsContext } from './SuggestionsContext';
import { clsx } from 'clsx';
const SPACING = {
    xs: 4,
    sm: 8,
    md: 12,
    lg: 16,
    xl: 24,
};
const TRANSITIONS = {
    fast: '150ms ease-in-out',
    normal: '200ms ease-in-out',
    slow: '300ms ease-in-out',
};
const BORDER_RADIUS = {
    sm: 4,
    md: 6,
    lg: 8,
    full: 9999,
};
const defaultStyles = {
    position: 'relative',
    width: '100%',
};
const inputWrapperStyles = {
    display: 'flex',
    alignItems: 'center',
    gap: `${SPACING.sm}px`,
    padding: `${SPACING.sm}px ${SPACING.md}px`,
    border: '1px solid var(--seekora-border-color, rgba(0,0,0,0.1))',
    borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
    backgroundColor: 'var(--seekora-bg-surface, transparent)',
    transition: `border-color ${TRANSITIONS.fast}, box-shadow ${TRANSITIONS.fast}`,
    boxSizing: 'border-box',
};
const inputStyles = {
    flex: 1,
    minWidth: 0,
    padding: `${SPACING.sm}px 0`,
    border: 'none',
    outline: 'none',
    backgroundColor: 'transparent',
    fontSize: 'inherit',
    color: 'var(--seekora-text-primary, inherit)',
    fontFamily: 'inherit',
};
export function SearchInput({ placeholder = 'Powered by Seekora', autoFocus = false, showClearButton = true, closeOnBlur = true, leftIcon, className, style, inputClassName, inputStyle, ariaLabel = 'Search', }) {
    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-suggestions-search-input-wrapper', className), style: { ...defaultStyles, ...style } },
        React.createElement("div", { className: "seekora-suggestions-input-wrapper", style: inputWrapperStyles },
            leftIcon ? (React.createElement("span", { className: "seekora-suggestions-input-left-icon", style: { display: 'flex', flexShrink: 0, color: 'inherit', opacity: 0.5 } }, 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-suggestions-input', inputClassName), style: { ...inputStyles, ...inputStyle } }),
            showClearButton && query ? (React.createElement("button", { type: "button", onClick: handleClear, className: "seekora-suggestions-input-clear", "aria-label": "Clear search", style: {
                    padding: 8,
                    border: 'none',
                    background: 'transparent',
                    cursor: 'pointer',
                    color: 'inherit', opacity: 0.5,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                } },
                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" })));
}
