import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Search, X, Loader2 } from "lucide-react";
import { Input } from "./ui/input";
import { cn } from "../lib/utils";
export const SearchInput = forwardRef(({ value, onChange, onValueChange, placeholder = "Search...", className, inputClassName, inputComponent: InputComponent = Input, showSearchIcon = true, searchIconPosition = "left", searchIconClassName, showClearIcon = true, disabled = false, autoFocus = false, loading = false, background = "default", size = "md", spinnerStyle, onClear, testId, type = "text", ...inputProps }, ref) => {
    const handleValueChange = (nextValue) => {
        onChange?.(nextValue);
        onValueChange?.(nextValue);
    };
    const handleClear = () => {
        handleValueChange("");
        onClear?.();
    };
    const showLeftSearchIcon = showSearchIcon && searchIconPosition === "left";
    const showRightSearchIcon = showSearchIcon && searchIconPosition === "right" && !value && !loading;
    const isControlled = value !== undefined;
    return (_jsxs("div", { className: cn("relative flex items-center", className), children: [_jsx(InputComponent, { ref: ref, type: type, ...inputProps, ...(isControlled ? { value } : {}), ...(onValueChange
                    ? { onValueChange: handleValueChange }
                    : {
                        onChange: (e) => handleValueChange(e.target.value),
                    }), className: cn("pr-8 text-xs", showLeftSearchIcon && "pl-8", size === "sm" && "h-7", size === "md" && "h-8", size === "lg" && "h-9", size === "xs" && "h-6", background === "white" && "bg-white", inputClassName), placeholder: placeholder, disabled: disabled, autoFocus: autoFocus, "data-testid": testId }), showLeftSearchIcon && (_jsx(Search, { className: cn("text-neutral-grey-100 pointer-events-none absolute left-3 h-4 w-4", searchIconClassName), strokeWidth: 1 })), loading && (_jsx(Loader2, { className: "text-neutral-grey-50 absolute right-2 h-4 w-4 animate-spin", strokeWidth: 1, style: spinnerStyle })), showRightSearchIcon && (_jsx(Search, { className: "text-neutral-grey-50 absolute right-2 h-4 w-4", strokeWidth: 1 })), !loading && value && showClearIcon && (_jsx(X, { className: "text-neutral-grey-50 hover:text-neutral-grey-50 absolute right-2 h-4 w-4 cursor-pointer", strokeWidth: 1, onClick: handleClear }))] }));
});
SearchInput.displayName = "SearchInput";
/**
 * Utility function to highlight matching text in search results
 * @param text - The text to highlight
 * @param filter - The filter string to match
 * @returns JSX elements with highlighted matches
 */
export const highlightMatch = (text, filter) => {
    if (!filter.trim())
        return text;
    return text
        .split(new RegExp(`(${filter})`, "i"))
        .map((part, i) => part.toLowerCase() === filter.toLowerCase() && part ? (_jsx("u", { className: "font-bold", children: part }, i)) : (part && _jsx("span", { children: part }, i)));
};
//# sourceMappingURL=SearchInput.js.map