import React from "react";
import Icon from "../../Icon/Icon";
import IconProp from "../../../../Types/Icon/IconProp";
const TelemetryActiveFilterChips = (props) => {
    if (props.filters.length === 0) {
        return null;
    }
    const readOnlyFilters = props.filters.filter((f) => {
        return f.readOnly;
    });
    const removableFilters = props.filters.filter((f) => {
        return !f.readOnly;
    });
    return (React.createElement("div", { className: "flex flex-wrap items-center gap-1.5 px-0.5" },
        readOnlyFilters.map((filter) => {
            const chipKey = `readonly:${filter.facetKey}:${filter.value}`;
            return (React.createElement("span", { key: chipKey, className: "inline-flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 py-0.5 pl-2 pr-2 text-xs text-gray-700", title: `${filter.displayKey}: ${filter.displayValue} (applied filter)` },
                React.createElement(Icon, { icon: IconProp.Lock, className: "h-2.5 w-2.5 text-gray-400" }),
                React.createElement("span", { className: "font-medium text-gray-500" },
                    filter.displayKey,
                    ":"),
                React.createElement("span", null, filter.displayValue)));
        }),
        removableFilters.map((filter) => {
            const chipKey = `${filter.facetKey}:${filter.value}`;
            return (React.createElement("span", { key: chipKey, className: "inline-flex items-center gap-1 rounded-md border border-indigo-200 bg-indigo-50 py-0.5 pl-2 pr-1 text-xs text-indigo-700" },
                React.createElement("span", { className: "font-medium text-indigo-500" },
                    filter.displayKey,
                    ":"),
                React.createElement("span", null, filter.displayValue),
                React.createElement("button", { type: "button", className: "ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded text-indigo-400 transition-colors hover:bg-indigo-100 hover:text-indigo-600", onClick: () => {
                        props.onRemove(filter.facetKey, filter.value);
                    }, title: `Remove ${filter.displayKey}: ${filter.displayValue}` },
                    React.createElement(Icon, { icon: IconProp.Close, className: "h-2.5 w-2.5" }))));
        }),
        removableFilters.length > 1 && (React.createElement("button", { type: "button", className: "rounded px-1.5 py-0.5 text-[11px] font-medium text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600", onClick: props.onClearAll }, "Clear all"))));
};
export default TelemetryActiveFilterChips;
//# sourceMappingURL=TelemetryActiveFilterChips.js.map