import Text from "../../../../Types/Text";
import ValueFormatter from "../../../../Utils/ValueFormatter";
import LineChart from "../Line/LineChart";
import BarChartElement from "../Bar/BarChart";
import AreaChartElement from "../Area/AreaChart";
import Icon, { SizeProp } from "../../Icon/Icon";
import IconProp from "../../../../Types/Icon/IconProp";
import Modal, { ModalWidth } from "../../Modal/Modal";
import React, { useState } from "react";
export var ChartType;
(function (ChartType) {
    ChartType["LINE"] = "line";
    ChartType["BAR"] = "bar";
    ChartType["AREA"] = "area";
})(ChartType || (ChartType = {}));
const ChartGroup = (props) => {
    const syncId = Text.generateRandomText(10);
    const [metricInfoModalChart, setMetricInfoModalChart] = useState(null);
    const getChartContent = (chart, index) => {
        /*
         * When the chart has its own seriesControls panel, that panel doubles
         * as a colored, interactive legend — so we suppress the built-in
         * Recharts legend to avoid showing two legends for the same series.
         */
        const showLegend = !chart.seriesControls;
        switch (chart.type) {
            case ChartType.LINE:
                return (React.createElement(LineChart, Object.assign({ key: index }, chart.props, { syncid: syncId, heightInPx: props.heightInPx, exemplarPoints: chart.exemplarPoints, onExemplarClick: chart.onExemplarClick, showLegend: showLegend })));
            case ChartType.BAR:
                return (React.createElement(BarChartElement, Object.assign({ key: index }, chart.props, { syncid: syncId, heightInPx: props.heightInPx, showLegend: showLegend })));
            case ChartType.AREA:
                return (React.createElement(AreaChartElement, Object.assign({ key: index }, chart.props, { syncid: syncId, heightInPx: props.heightInPx, exemplarPoints: chart.exemplarPoints, onExemplarClick: chart.onExemplarClick, showLegend: showLegend })));
            default:
                return React.createElement(React.Fragment, null);
        }
    };
    const getInfoIcon = (chart) => {
        if (!chart.metricInfo) {
            return React.createElement(React.Fragment, null);
        }
        return (React.createElement("button", { type: "button", className: "ml-1.5 inline-flex items-center justify-center rounded-full w-5 h-5 text-gray-300 hover:text-gray-500 hover:bg-gray-100 transition-all duration-150", title: "View metric details", onClick: () => {
                setMetricInfoModalChart(chart.metricInfo || null);
            } },
            React.createElement(Icon, { icon: IconProp.InformationCircle, size: SizeProp.Smaller, className: "h-3.5 w-3.5" })));
    };
    const renderMetricInfoModal = () => {
        if (!metricInfoModalChart) {
            return React.createElement(React.Fragment, null);
        }
        const attributes = metricInfoModalChart.attributes || {};
        const attributeKeys = Object.keys(attributes);
        /*
         * OTel reports fraction metrics like `*.utilization` with unit "1".
         * Translate that to a human label ("Percent") for the details modal,
         * and hide the row entirely for truly dimensionless counts.
         */
        const displayUnit = metricInfoModalChart.unit
            ? ValueFormatter.getReadableUnit(metricInfoModalChart.unit, {
                metricName: metricInfoModalChart.metricName,
            })
            : "";
        return (React.createElement(Modal, { title: "Metric Details", onClose: () => {
                setMetricInfoModalChart(null);
            }, onSubmit: () => {
                setMetricInfoModalChart(null);
            }, submitButtonText: "Close", modalWidth: ModalWidth.Normal },
            React.createElement("div", { className: "space-y-4" },
                React.createElement("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-4" },
                    React.createElement("table", { className: "w-full text-sm" },
                        React.createElement("tbody", null,
                            React.createElement("tr", { className: "border-b border-gray-200" },
                                React.createElement("td", { className: "py-2.5 pr-4 font-medium text-gray-500 whitespace-nowrap" }, "Metric Name"),
                                React.createElement("td", { className: "py-2.5 text-gray-900 font-mono text-xs" }, metricInfoModalChart.metricName)),
                            React.createElement("tr", { className: "border-b border-gray-200" },
                                React.createElement("td", { className: "py-2.5 pr-4 font-medium text-gray-500 whitespace-nowrap" }, "Aggregation"),
                                React.createElement("td", { className: "py-2.5 text-gray-900" }, metricInfoModalChart.aggregationType)),
                            displayUnit && (React.createElement("tr", { className: "border-b border-gray-200" },
                                React.createElement("td", { className: "py-2.5 pr-4 font-medium text-gray-500 whitespace-nowrap" }, "Unit"),
                                React.createElement("td", { className: "py-2.5 text-gray-900" }, displayUnit))),
                            metricInfoModalChart.groupByAttribute && (React.createElement("tr", { className: "border-b border-gray-200" },
                                React.createElement("td", { className: "py-2.5 pr-4 font-medium text-gray-500 whitespace-nowrap" }, "Grouped By"),
                                React.createElement("td", { className: "py-2.5 text-gray-900 font-mono text-xs" }, metricInfoModalChart.groupByAttribute))),
                            attributeKeys.length > 0 && (React.createElement("tr", null,
                                React.createElement("td", { className: "py-2.5 pr-4 font-medium text-gray-500 whitespace-nowrap align-top" }, "Attributes"),
                                React.createElement("td", { className: "py-2.5" },
                                    React.createElement("div", { className: "space-y-1.5" }, attributeKeys.map((key) => {
                                        return (React.createElement("div", { key: key, className: "flex items-center gap-2" },
                                            React.createElement("span", { className: "inline-flex items-center rounded bg-gray-200 px-2 py-0.5 text-xs font-mono text-gray-700" }, key),
                                            React.createElement("span", { className: "text-xs text-gray-900 font-mono" }, attributes[key])));
                                    })))))))))));
    };
    // When hideCard is true, render charts in a clean vertical stack with dividers
    if (props.hideCard) {
        return (React.createElement(React.Fragment, null,
            renderMetricInfoModal(),
            React.createElement("div", { className: "space-y-3" }, props.charts.map((chart, index) => {
                return (React.createElement("div", { key: index, className: `bg-white ${props.chartCssClass || ""}` },
                    React.createElement("div", { className: "px-5 pt-4 pb-4" },
                        React.createElement("div", { className: "mb-3 pb-3 border-b border-gray-100" },
                            React.createElement("div", { className: "flex items-center" },
                                React.createElement("h3", { className: "text-sm font-semibold text-gray-800 tracking-tight" }, chart.title),
                                getInfoIcon(chart)),
                            chart.description && (React.createElement("p", { className: "mt-1 text-xs text-gray-500 hidden md:block" }, chart.description))),
                        chart.seriesControls ? (React.createElement("div", { className: "mb-3" }, chart.seriesControls)) : null,
                        getChartContent(chart, index))));
            }))));
    }
    // When showing cards, use the grid layout
    const gridCols = props.charts.length > 1 ? "lg:grid-cols-2" : "lg:grid-cols-1";
    return (React.createElement(React.Fragment, null,
        renderMetricInfoModal(),
        React.createElement("div", { className: `grid grid-cols-1 ${gridCols} gap-4 space-y-4 lg:space-y-0` }, props.charts.map((chart, index) => {
            return (React.createElement("div", { key: index, className: `p-5 rounded-lg border border-gray-200 bg-white shadow-sm ${props.chartCssClass || ""}` },
                React.createElement("div", { className: "flex items-center" },
                    React.createElement("h2", { "data-testid": "card-details-heading", id: "card-details-heading", className: "text-base font-semibold leading-6 text-gray-900" }, chart.title),
                    getInfoIcon(chart)),
                chart.description && (React.createElement("p", { "data-testid": "card-description", className: "mt-0.5 text-sm text-gray-500 w-full hidden md:block" }, chart.description)),
                chart.seriesControls ? (React.createElement("div", { className: "mt-3" }, chart.seriesControls)) : null,
                getChartContent(chart, index)));
        }))));
};
export default ChartGroup;
//# sourceMappingURL=ChartGroup.js.map