import React, { useMemo } from "react";
import TelemetryFacetSection from "./TelemetryFacetSection";
import ComponentLoader from "../../ComponentLoader/ComponentLoader";
const TelemetryFacetSidebar = (props) => {
    const orderedConfigs = useMemo(() => {
        const copy = [...props.facetConfigs];
        copy.sort((a, b) => {
            var _a, _b;
            const aPriority = (_a = a.priority) !== null && _a !== void 0 ? _a : 100;
            const bPriority = (_b = b.priority) !== null && _b !== void 0 ? _b : 100;
            if (aPriority !== bPriority) {
                return aPriority - bPriority;
            }
            return a.title.localeCompare(b.title);
        });
        return copy;
    }, [props.facetConfigs]);
    const activeValuesByKey = useMemo(() => {
        const map = {};
        const add = (key, value) => {
            if (!map[key]) {
                map[key] = new Set();
            }
            map[key].add(value);
        };
        if (props.activeFilters) {
            for (const filter of props.activeFilters) {
                add(filter.facetKey, filter.value);
                /*
                 * Attribute-backed facets store chips as `attributes.<key>` while
                 * the facet config is keyed by the raw attribute key — index both
                 * so the facet row shows its selected state.
                 */
                if (filter.facetKey.startsWith("attributes.")) {
                    add(filter.facetKey.substring("attributes.".length), filter.value);
                }
            }
        }
        return map;
    }, [props.activeFilters]);
    return (React.createElement("div", { className: "flex h-full w-56 flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white" },
        React.createElement("div", { className: "border-b border-gray-100 px-3 py-2.5" },
            React.createElement("h3", { className: "text-[11px] font-semibold uppercase tracking-widest text-gray-400" }, props.headerLabel || "Filters")),
        props.isLoading && Object.keys(props.facetData).length === 0 && (React.createElement("div", { className: "flex flex-1 items-center justify-center py-8" },
            React.createElement(ComponentLoader, null))),
        React.createElement("div", { className: "flex-1 overflow-y-auto" }, orderedConfigs.map((config) => {
            const values = props.facetData[config.key] || [];
            const onSearchChange = config.serverSearchable && props.onFacetSearchChange
                ? (text) => {
                    props.onFacetSearchChange(config.key, text);
                }
                : undefined;
            return (React.createElement(TelemetryFacetSection, { key: config.key, facetKey: config.key, title: config.title, values: values, onIncludeValue: props.onIncludeFilter, onExcludeValue: props.onExcludeFilter, valueDisplayMap: config.valueDisplayMap, valueColorMap: config.valueColorMap, activeValues: activeValuesByKey[config.key], onSearchChange: onSearchChange }));
        }))));
};
export default TelemetryFacetSidebar;
//# sourceMappingURL=TelemetryFacetSidebar.js.map