import React from "react";
import TelemetryTimeRangePicker from "./components/TelemetryTimeRangePicker";
import TelemetrySearchBar from "./components/TelemetrySearchBar";
import TelemetryFacetSidebar from "./components/TelemetryFacetSidebar";
import TelemetryActiveFilterChips from "./components/TelemetryActiveFilterChips";
import TelemetryHistogram from "./components/TelemetryHistogram";
import TelemetryPagination from "./components/TelemetryPagination";
import ComponentLoader from "../ComponentLoader/ComponentLoader";
import ErrorMessage from "../ErrorMessage/ErrorMessage";
import Icon from "../Icon/Icon";
import IconProp from "../../../Types/Icon/IconProp";
const DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
function TelemetryViewerInner(props) {
    var _a, _b;
    const showFacets = ((_a = props.showFacetSidebar) !== null && _a !== void 0 ? _a : true) &&
        props.facetConfigs !== undefined &&
        props.facetConfigs.length > 0;
    const showHistogram = (_b = props.showHistogram) !== null && _b !== void 0 ? _b : true;
    return (React.createElement("div", { className: "flex min-h-0 w-full flex-1 flex-col gap-3" },
        React.createElement("div", { className: "flex flex-wrap items-center gap-2" },
            React.createElement("div", { className: "min-w-0 flex-1" },
                React.createElement(TelemetrySearchBar, { ref: props.searchBarRef, value: props.searchValue, onChange: props.onSearchChange, onSubmit: props.onSearchSubmit, placeholder: props.searchPlaceholder, suggestions: props.searchSuggestions, attributeSuggestions: props.searchAttributeSuggestions, valueSuggestions: props.searchValueSuggestions, fieldAliasMap: props.searchFieldAliasMap, onFieldValueSelect: props.onSearchFieldValueSelect, helpRows: props.searchHelpRows, helpCombinedExample: props.searchHelpCombinedExample, isAttributesLoading: props.searchAttributesLoading, isValuesLoading: props.searchValuesLoading })),
            props.toolbarLeadingActions,
            React.createElement(TelemetryTimeRangePicker, { value: props.timeRange, onChange: props.onTimeRangeChange }),
            props.live && (React.createElement("button", { type: "button", className: `inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors ${props.live.isLive
                    ? "border-emerald-300 bg-emerald-50 text-emerald-700"
                    : "border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50"} ${props.live.isDisabled ? "cursor-not-allowed opacity-50" : ""}`, disabled: props.live.isDisabled, onClick: () => {
                    var _a;
                    (_a = props.live) === null || _a === void 0 ? void 0 : _a.onToggle(!props.live.isLive);
                }, title: props.live.isLive ? "Pause live updates" : "Enable live updates" },
                React.createElement("span", { className: `h-2 w-2 rounded-full ${props.live.isLive
                        ? "animate-pulse bg-emerald-500"
                        : "bg-gray-300"}` }),
                React.createElement("span", null, props.live.isLive ? "Live" : "Paused"))),
            props.onRefresh && (React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50", onClick: props.onRefresh, title: "Refresh" },
                React.createElement(Icon, { icon: IconProp.Refresh, className: "h-3.5 w-3.5" }),
                React.createElement("span", null, "Refresh"))),
            props.toolbarTrailingActions),
        props.activeFilters && props.activeFilters.length > 0 && (React.createElement(TelemetryActiveFilterChips, { filters: props.activeFilters, onRemove: (key, value) => {
                var _a;
                (_a = props.onRemoveFilter) === null || _a === void 0 ? void 0 : _a.call(props, key, value);
            }, onClearAll: () => {
                var _a;
                (_a = props.onClearAllFilters) === null || _a === void 0 ? void 0 : _a.call(props);
            } })),
        props.mainContentOverride,
        !props.mainContentOverride &&
            showHistogram &&
            props.histogramBuckets &&
            props.histogramSeries && (React.createElement(TelemetryHistogram, { buckets: props.histogramBuckets, isLoading: props.histogramLoading || false, series: props.histogramSeries, title: props.histogramTitle, onTimeRangeSelect: props.onHistogramTimeRangeSelect, headerActions: props.histogramHeaderActions, valueFormatter: props.histogramValueFormatter })),
        React.createElement("div", { className: `flex min-h-0 flex-1 gap-3 ${props.mainContentOverride ? "hidden" : ""}` },
            showFacets && (React.createElement(TelemetryFacetSidebar, { facetData: props.facetData || {}, isLoading: props.facetLoading || false, facetConfigs: props.facetConfigs || [], activeFilters: props.activeFilters, onIncludeFilter: (key, value) => {
                    var _a;
                    (_a = props.onFacetInclude) === null || _a === void 0 ? void 0 : _a.call(props, key, value);
                }, onExcludeFilter: (key, value) => {
                    var _a;
                    (_a = props.onFacetExclude) === null || _a === void 0 ? void 0 : _a.call(props, key, value);
                }, onFacetSearchChange: props.onFacetSearchChange })),
            React.createElement("div", { className: "flex min-w-0 flex-1 flex-col rounded-lg border border-gray-200 bg-white" },
                props.error && (React.createElement("div", { className: "p-4" },
                    React.createElement(ErrorMessage, { message: props.error }))),
                !props.error && (React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto" }, props.isLoading && props.items.length === 0 ? (React.createElement("div", { className: "flex h-48 items-center justify-center" },
                    React.createElement(ComponentLoader, null))) : props.items.length === 0 ? (React.createElement("div", { className: "flex h-48 flex-col items-center justify-center gap-2 px-6 text-center" },
                    React.createElement(Icon, { icon: IconProp.Search, className: "h-8 w-8 text-gray-300" }),
                    React.createElement("p", { className: "text-sm font-medium text-gray-500" }, props.emptyMessage || "No results"),
                    React.createElement("p", { className: "text-xs text-gray-400" }, "Try adjusting filters or time range."))) : (React.createElement("ul", { className: "divide-y divide-gray-100" }, props.items.map((item, index) => {
                    return (React.createElement("li", { key: props.getRowKey(item, index) }, props.renderRow(item, index)));
                }))))),
                React.createElement(TelemetryPagination, { currentPage: props.page, totalItems: props.totalCount, pageSize: props.pageSize, pageSizeOptions: props.pageSizeOptions || DEFAULT_PAGE_SIZE_OPTIONS, onPageChange: props.onPageChange, onPageSizeChange: props.onPageSizeChange, isDisabled: props.isLoading, itemLabel: props.itemLabel }))),
        props.detailPanel));
}
// Generic functional component wrapper so TypeScript can infer <T>.
const TelemetryViewer = TelemetryViewerInner;
export default TelemetryViewer;
//# sourceMappingURL=TelemetryViewer.js.map