import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Copyright (c) 2020-present, Goldman Sachs
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { observer } from 'mobx-react-lite';
import { useRef, useLayoutEffect } from 'react';
import { clsx } from '@finos/legend-art';
import { MAXIMUM_FRACTION_DIGITS } from './QueryBuilderTDSSimpleGridResult.js';
import { DEFAULT_LOCALE } from '../../../graph-manager/QueryBuilderConst.js';
const formatNum = (value) => Intl.NumberFormat(DEFAULT_LOCALE, {
    maximumFractionDigits: MAXIMUM_FRACTION_DIGITS,
}).format(value);
// ---------------------------------------------------------------------------
// Inline loading spinner — shown while stats are being computed
// ---------------------------------------------------------------------------
const StatsSpinner = () => (_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__spinner", title: "Computing\u2026" }));
// ---------------------------------------------------------------------------
// Value-frequency tooltip (shown on Unique Count hover)
// ---------------------------------------------------------------------------
const FREQ_CHART_HEIGHT = 10; // px per row
const FREQ_CHART_BAR_AREA = 80; // px available for bars
const FREQ_LABEL_WIDTH = 90; // px for label column
const FREQ_COUNT_WIDTH = 30; // px for count column
const FREQ_TOTAL_WIDTH = FREQ_LABEL_WIDTH + FREQ_CHART_BAR_AREA + FREQ_COUNT_WIDTH + 8;
const ValueFrequencyTooltip = ({ frequencies, darkMode, }) => {
    const maxCount = Math.max(...frequencies.map((f) => f.count));
    const tooltipRef = useRef(null);
    // After the tooltip becomes visible, clamp it within the viewport so that
    // it never overflows off the left or right edge of the window.
    useLayoutEffect(() => {
        const el = tooltipRef.current;
        if (!el) {
            return;
        }
        const rect = el.getBoundingClientRect();
        if (rect.left < 0) {
            el.style.left = `${-rect.left + 4}px`;
        }
        else if (rect.right > globalThis.innerWidth) {
            el.style.left = `${globalThis.innerWidth - rect.right - 4}px`;
        }
    });
    return (_jsx("div", { ref: tooltipRef, className: clsx('query-builder__result__tds-grid__stats-bar__freq-tooltip', {
            'query-builder__result__tds-grid__stats-bar__freq-tooltip--dark': darkMode,
        }), children: _jsx("svg", { width: FREQ_TOTAL_WIDTH, height: frequencies.length * (FREQ_CHART_HEIGHT + 3) + 2, children: frequencies.map((freq, i) => {
                const y = i * (FREQ_CHART_HEIGHT + 3) + 1;
                const barW = Math.max(1, (freq.count / maxCount) * FREQ_CHART_BAR_AREA);
                const labelText = freq.label.length > 12 ? `${freq.label.slice(0, 11)}…` : freq.label;
                return (_jsxs("g", { children: [_jsx("text", { x: FREQ_LABEL_WIDTH - 4, y: y + FREQ_CHART_HEIGHT - 2, textAnchor: "end", className: clsx('query-builder__result__tds-grid__stats-bar__freq-tooltip__label', {
                                'query-builder__result__tds-grid__stats-bar__freq-tooltip__label--other': freq.isOther,
                                'query-builder__result__tds-grid__stats-bar__freq-tooltip__label--empty': freq.isEmpty,
                            }), children: labelText }), _jsx("rect", { x: FREQ_LABEL_WIDTH, y: y, width: barW, height: FREQ_CHART_HEIGHT, className: clsx('query-builder__result__tds-grid__stats-bar__freq-tooltip__bar', {
                                'query-builder__result__tds-grid__stats-bar__freq-tooltip__bar--other': freq.isOther,
                                'query-builder__result__tds-grid__stats-bar__freq-tooltip__bar--empty': freq.isEmpty,
                            }) }), _jsx("text", { x: FREQ_LABEL_WIDTH + FREQ_CHART_BAR_AREA + 4, y: y + FREQ_CHART_HEIGHT - 2, className: "query-builder__result__tds-grid__stats-bar__freq-tooltip__count", children: freq.count })] }, i));
            }) }) }));
};
const formatBucketLabel = (bucket, chartType) => {
    const n = bucket.count;
    const countLabel = `${n} ${n === 1 ? 'value' : 'values'}`;
    if (chartType === 'date') {
        const lo = bucket.lowerDateLabel ?? bucket.lower;
        const hi = bucket.upperDateLabel ?? bucket.upper;
        if (lo === hi) {
            return `${countLabel} on ${lo}`;
        }
        return `${countLabel} within the range ${lo} – ${hi}`;
    }
    if (chartType === 'string-length') {
        const lo = Math.round(bucket.lower);
        const hi = Math.round(bucket.upper);
        if (lo === hi) {
            return `${countLabel} with length ${lo}`;
        }
        return `${countLabel} with length ${lo} – ${hi}`;
    }
    // numeric
    if (bucket.lower === bucket.upper) {
        return `${countLabel} equal to ${formatNum(bucket.lower)}`;
    }
    return `${countLabel} within the range ${formatNum(bucket.lower)} – ${formatNum(bucket.upper)}`;
};
// Compact SVG frequency-distribution histogram
const CHART_HEIGHT = 18;
const CHART_WIDTH = 120;
const BAR_GAP = 1;
const MiniHistogram = ({ buckets, chartType, darkMode, }) => {
    if (buckets.length === 0) {
        return null;
    }
    const maxCount = Math.max(...buckets.map((b) => b.count));
    if (maxCount === 0) {
        return null;
    }
    const n = buckets.length;
    const barW = Math.max(1, (CHART_WIDTH - BAR_GAP * (n - 1)) / n);
    return (_jsx("div", { className: clsx('query-builder__result__tds-grid__stats-bar__chart', {
            'query-builder__result__tds-grid__stats-bar__chart--dark': darkMode,
        }), children: _jsx("svg", { width: CHART_WIDTH, height: CHART_HEIGHT, children: buckets.map((bucket, i) => {
                const barH = Math.max(1, (bucket.count / maxCount) * CHART_HEIGHT);
                const x = i * (barW + BAR_GAP);
                return (_jsx("rect", { x: x, y: CHART_HEIGHT - barH, width: barW, height: barH, opacity: bucket.count === 0 ? 0.15 : 1, children: _jsx("title", { children: formatBucketLabel(bucket, chartType) }) }, i));
            }) }) }));
};
export const QueryBuilderTDSCellSelectionStatsBar = observer((props) => {
    const { stats, cellCount, countReady, darkMode } = props;
    const loading = stats === undefined;
    const hasNumericStats = !loading && stats.sum !== undefined;
    const hasDateStats = !loading && stats.dateMin !== undefined;
    const hasStringStats = !loading && stats.strMinLength !== undefined;
    const hasChart = !loading &&
        stats.distributionBuckets !== undefined &&
        stats.distributionBuckets.length >= 2;
    return (_jsxs("div", { className: clsx('query-builder__result__tds-grid__stats-bar', {
            'query-builder__result__tds-grid__stats-bar--dark': darkMode,
        }), children: [_jsxs("span", { className: clsx('query-builder__result__tds-grid__stats-bar__item', {
                    'query-builder__result__tds-grid__stats-bar__item--has-tooltip': !loading &&
                        stats.valueFrequencies !== undefined &&
                        stats.valueFrequencies.length > 0,
                }), children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__label", children: "Count:" }), _jsx("span", { className: clsx('query-builder__result__tds-grid__stats-bar__item__value', {
                            'query-builder__result__tds-grid__stats-bar__item__value--with-chart': !loading &&
                                stats.valueFrequencies !== undefined &&
                                stats.valueFrequencies.length > 0,
                        }), children: countReady ? cellCount : _jsx(StatsSpinner, {}) }), !loading &&
                        stats.valueFrequencies !== undefined &&
                        stats.valueFrequencies.length > 0 && (_jsx(ValueFrequencyTooltip, { frequencies: stats.valueFrequencies, darkMode: darkMode }))] }), _jsxs("span", { className: clsx('query-builder__result__tds-grid__stats-bar__item', {
                    'query-builder__result__tds-grid__stats-bar__item--has-tooltip': !loading &&
                        stats.valueFrequencies !== undefined &&
                        stats.valueFrequencies.length > 0,
                }), children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__label", children: "Unique Count:" }), _jsx("span", { className: clsx('query-builder__result__tds-grid__stats-bar__item__value', {
                            'query-builder__result__tds-grid__stats-bar__item__value--with-chart': !loading &&
                                stats.valueFrequencies !== undefined &&
                                stats.valueFrequencies.length > 0,
                        }), children: loading ? _jsx(StatsSpinner, {}) : stats.uniqueCount }), !loading &&
                        stats.valueFrequencies !== undefined &&
                        stats.valueFrequencies.length > 0 && (_jsx(ValueFrequencyTooltip, { frequencies: stats.valueFrequencies, darkMode: darkMode }))] }), _jsxs("span", { className: clsx('query-builder__result__tds-grid__stats-bar__item', {
                    'query-builder__result__tds-grid__stats-bar__item--has-tooltip': !loading &&
                        stats.valueFrequencies !== undefined &&
                        stats.valueFrequencies.length > 0,
                }), children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__label", children: "Empty Count:" }), _jsx("span", { className: clsx('query-builder__result__tds-grid__stats-bar__item__value', {
                            'query-builder__result__tds-grid__stats-bar__item__value--with-chart': !loading &&
                                stats.valueFrequencies !== undefined &&
                                stats.valueFrequencies.length > 0,
                        }), children: loading ? _jsx(StatsSpinner, {}) : stats.nullCount }), !loading &&
                        stats.valueFrequencies !== undefined &&
                        stats.valueFrequencies.length > 0 && (_jsx(ValueFrequencyTooltip, { frequencies: stats.valueFrequencies, darkMode: darkMode }))] }), hasNumericStats && (_jsxs(_Fragment, { children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__separator" }), _jsxs("span", { className: "query-builder__result__tds-grid__stats-bar__item", children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__label", children: "Min:" }), _jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__value", children: formatNum(stats.min ?? 0) })] }), _jsxs("span", { className: "query-builder__result__tds-grid__stats-bar__item", children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__label", children: "Max:" }), _jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__value", children: formatNum(stats.max ?? 0) })] }), _jsxs("span", { className: "query-builder__result__tds-grid__stats-bar__item", children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__label", children: "Sum:" }), _jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__value", children: formatNum(stats.sum ?? 0) })] }), _jsxs("span", { className: "query-builder__result__tds-grid__stats-bar__item", children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__label", children: "Avg:" }), _jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__value", children: formatNum(stats.avg ?? 0) })] })] })), hasDateStats && (_jsxs(_Fragment, { children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__separator" }), _jsxs("span", { className: "query-builder__result__tds-grid__stats-bar__item", children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__label", children: "Min:" }), _jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__value", children: stats.dateMin })] }), _jsxs("span", { className: "query-builder__result__tds-grid__stats-bar__item", children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__label", children: "Max:" }), _jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__value", children: stats.dateMax })] })] })), hasStringStats && (_jsxs(_Fragment, { children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__separator" }), _jsxs("span", { className: "query-builder__result__tds-grid__stats-bar__item", children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__label", children: "Min Length:" }), _jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__value", children: stats.strMinLength })] }), _jsxs("span", { className: "query-builder__result__tds-grid__stats-bar__item", children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__label", children: "Max Length:" }), _jsx("span", { className: "query-builder__result__tds-grid__stats-bar__item__value", children: stats.strMaxLength })] })] })), hasChart && (_jsxs(_Fragment, { children: [_jsx("span", { className: "query-builder__result__tds-grid__stats-bar__separator" }), _jsx(MiniHistogram, { buckets: stats.distributionBuckets ?? [], chartType: stats.distributionChartType ?? 'numeric', darkMode: darkMode })] }))] }));
});
//# sourceMappingURL=QueryBuilderTDSCellSelectionStatsBar.js.map