import React from "react";
const MAX_VISIBLE_SUGGESTIONS = 8;
const TelemetrySearchSuggestions = (props) => {
    const visible = props.suggestions.slice(0, MAX_VISIBLE_SUGGESTIONS);
    return (React.createElement("div", { className: "absolute left-0 right-0 top-full z-50 mt-1 max-h-56 overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg" },
        props.isLoading && (React.createElement("div", { className: "flex w-full items-center px-3 py-2 text-left text-sm text-gray-500" },
            React.createElement("svg", { className: "animate-spin -ml-0.5 mr-2 h-4 w-4 text-indigo-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true" },
                React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
                React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })),
            React.createElement("span", null, props.loadingMessage || "Loading..."))),
        !props.isLoading &&
            visible.length === 0 &&
            props.emptyMessage !== undefined && (React.createElement("div", { className: "px-3 py-2 text-sm text-gray-400" }, props.emptyMessage)),
        visible.map((suggestion, index) => {
            const isSelected = index === props.selectedIndex;
            return (React.createElement("button", { key: suggestion, type: "button", className: `flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors ${isSelected
                    ? "bg-indigo-50 text-indigo-700"
                    : "text-gray-700 hover:bg-gray-50"}`, onMouseDown: (e) => {
                    e.preventDefault();
                    props.onSelect(suggestion);
                } }, props.fieldContext ? (React.createElement(React.Fragment, null,
                React.createElement("span", { className: "font-mono text-xs text-gray-400" },
                    props.fieldContext,
                    ":"),
                React.createElement("span", { className: "font-mono" }, suggestion))) : props.isAttributeMode ? (React.createElement(React.Fragment, null,
                React.createElement("span", { className: "font-mono text-xs text-indigo-400" }, "@"),
                React.createElement("span", { className: "font-mono" }, suggestion))) : (React.createElement("span", { className: "font-mono" }, suggestion))));
        }),
        props.suggestions.length > MAX_VISIBLE_SUGGESTIONS && (React.createElement("div", { className: "px-3 py-1 text-[11px] text-gray-400" },
            "+",
            props.suggestions.length - MAX_VISIBLE_SUGGESTIONS,
            " more..."))));
};
export default TelemetrySearchSuggestions;
//# sourceMappingURL=TelemetrySearchSuggestions.js.map