import React from "react";
import OneUptimeDate from "../../../../Types/Date";
function formatTooltipTime(label) {
    if (!label) {
        return "";
    }
    const date = OneUptimeDate.fromString(label);
    if (isNaN(date.getTime())) {
        return label;
    }
    const now = new Date();
    const isToday = date.toDateString() === now.toDateString();
    const time = date.toLocaleTimeString([], {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false,
    });
    if (isToday) {
        return time;
    }
    const dateStr = date.toLocaleDateString([], {
        month: "short",
        day: "numeric",
    });
    return `${dateStr}, ${time}`;
}
const TelemetryHistogramTooltip = (props) => {
    if (!props.active || !props.payload || props.payload.length === 0) {
        return null;
    }
    const entries = props.payload
        .filter((entry) => {
        return entry.value > 0;
    })
        .map((entry) => {
        return {
            series: entry.dataKey,
            count: entry.value,
        };
    });
    if (entries.length === 0) {
        return null;
    }
    const total = entries.reduce((sum, e) => {
        return sum + e.count;
    }, 0);
    return (React.createElement("div", { className: "rounded-md border border-gray-200 bg-white px-3 py-2 shadow-md" },
        React.createElement("p", { className: "mb-1.5 border-b border-gray-100 pb-1.5 font-mono text-[11px] font-medium text-gray-500" }, formatTooltipTime(props.label)),
        React.createElement("div", { className: "space-y-0.5" }, entries.map((entry) => {
            const series = props.seriesByKey[entry.series];
            const color = (series === null || series === void 0 ? void 0 : series.color) || "#cbd5e1";
            const label = (series === null || series === void 0 ? void 0 : series.label) || entry.series;
            return (React.createElement("div", { key: entry.series, className: "flex items-center justify-between gap-6 py-0.5" },
                React.createElement("div", { className: "flex items-center gap-1.5" },
                    React.createElement("span", { className: "inline-block h-2.5 w-2.5 rounded-sm", style: { backgroundColor: color } }),
                    React.createElement("span", { className: "text-xs text-gray-600" }, label)),
                React.createElement("span", { className: "font-mono text-xs font-semibold tabular-nums text-gray-800" }, props.valueFormatter
                    ? props.valueFormatter(entry.count)
                    : entry.count.toLocaleString())));
        })),
        entries.length > 1 && !props.valueFormatter && (React.createElement("div", { className: "mt-1.5 flex items-center justify-between border-t border-gray-100 pt-1.5" },
            React.createElement("span", { className: "text-xs text-gray-500" }, "Total"),
            React.createElement("span", { className: "font-mono text-xs font-semibold tabular-nums text-gray-800" }, total.toLocaleString())))));
};
export default TelemetryHistogramTooltip;
//# sourceMappingURL=TelemetryHistogramTooltip.js.map