import OneUptimeDate from "../../../Types/Date";
import React from "react";
const UptimeBarTooltip = (props) => {
    const dateStr = OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.date, true);
    // Color tiers
    const isGood = props.uptimePercent >= 99.9;
    const isWarn = !isGood && props.uptimePercent >= 99;
    const uptimeColor = isGood
        ? "#059669"
        : isWarn
            ? "#d97706"
            : "#dc2626";
    // Sort: downtime first, then by duration desc
    const sortedDurations = [
        ...props.statusDurations,
    ].sort((a, b) => {
        if (a.isDowntime !== b.isDowntime) {
            return a.isDowntime ? -1 : 1;
        }
        return b.seconds - a.seconds;
    });
    const totalSeconds = sortedDurations.reduce((sum, d) => {
        return sum + d.seconds;
    }, 0);
    const hasIncidents = props.incidents.length > 0;
    const hasStatuses = sortedDurations.length > 0;
    return (React.createElement("div", { style: {
            minWidth: "280px",
            maxWidth: "340px",
            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
        } },
        React.createElement("div", { style: {
                display: "flex",
                alignItems: "center",
                gap: "8px",
                paddingBottom: "10px",
                marginBottom: "10px",
                borderBottom: "1px solid #f0f0f0",
            } },
            React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#9ca3af", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 } },
                React.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
                React.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
                React.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
                React.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" })),
            React.createElement("span", { style: {
                    fontWeight: 600,
                    fontSize: "13px",
                    color: "#111827",
                    letterSpacing: "-0.01em",
                } }, dateStr)),
        props.hasEvents && (React.createElement("div", { style: {
                marginBottom: hasStatuses || hasIncidents ? "12px" : "0",
            } },
            React.createElement("div", { style: {
                    display: "flex",
                    alignItems: "baseline",
                    justifyContent: "space-between",
                    marginBottom: "8px",
                } },
                React.createElement("span", { style: {
                        fontSize: "11px",
                        color: "#6b7280",
                        fontWeight: 500,
                    } }, "Uptime"),
                React.createElement("div", { style: { display: "flex", alignItems: "baseline" } },
                    React.createElement("span", { style: {
                            fontSize: "14px",
                            fontWeight: 600,
                            color: uptimeColor,
                            fontVariantNumeric: "tabular-nums",
                            lineHeight: 1,
                            letterSpacing: "-0.03em",
                        } }, props.uptimePercent >= 100
                        ? "100"
                        : props.uptimePercent.toFixed(2)),
                    React.createElement("span", { style: {
                            fontSize: "11px",
                            fontWeight: 600,
                            color: uptimeColor,
                            marginLeft: "1px",
                            opacity: 0.7,
                        } }, "%"))),
            totalSeconds > 0 && sortedDurations.length > 1 ? (React.createElement("div", { style: {
                    width: "100%",
                    height: "4px",
                    borderRadius: "100px",
                    overflow: "hidden",
                    display: "flex",
                    gap: "1px",
                    backgroundColor: "#e5e7eb",
                } }, sortedDurations.map((status, index) => {
                const widthPercent = (status.seconds / totalSeconds) * 100;
                if (widthPercent < 0.5) {
                    return null;
                }
                return (React.createElement("div", { key: index, style: {
                        width: `${widthPercent}%`,
                        height: "100%",
                        backgroundColor: status.color.toString(),
                    } }));
            }))) : (React.createElement("div", { style: {
                    width: "100%",
                    height: "4px",
                    backgroundColor: "#e5e7eb",
                    borderRadius: "100px",
                    overflow: "hidden",
                } },
                React.createElement("div", { style: {
                        width: `${Math.min(props.uptimePercent, 100)}%`,
                        height: "100%",
                        backgroundColor: uptimeColor,
                        borderRadius: "100px",
                    } }))))),
        !props.hasEvents && (React.createElement("div", { style: {
                backgroundColor: "#f9fafb",
                borderRadius: "8px",
                padding: "16px",
                textAlign: "center",
            } },
            React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "#d1d5db", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", style: { margin: "0 auto 6px" } },
                React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
                React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
                React.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })),
            React.createElement("div", { style: {
                    fontSize: "12px",
                    color: "#9ca3af",
                    fontWeight: 500,
                } }, "No monitoring data for this day"))),
        hasStatuses && (React.createElement("div", { style: {
                paddingBottom: hasIncidents ? "10px" : "0",
                marginBottom: hasIncidents ? "10px" : "0",
                borderBottom: hasIncidents ? "1px solid #f0f0f0" : "none",
            } }, sortedDurations.map((status, index) => {
            const pct = totalSeconds > 0 ? (status.seconds / totalSeconds) * 100 : 0;
            return (React.createElement("div", { key: index, style: {
                    display: "flex",
                    alignItems: "center",
                    padding: "4px 0",
                    gap: "8px",
                } },
                React.createElement("div", { style: {
                        display: "flex",
                        alignItems: "center",
                        gap: "6px",
                        width: "100px",
                        flexShrink: 0,
                    } },
                    React.createElement("span", { style: {
                            width: "6px",
                            height: "6px",
                            borderRadius: "50%",
                            backgroundColor: status.color.toString(),
                            display: "inline-block",
                            flexShrink: 0,
                        } }),
                    React.createElement("span", { style: {
                            fontSize: "12px",
                            color: "#374151",
                            fontWeight: 500,
                            whiteSpace: "nowrap",
                            overflow: "hidden",
                            textOverflow: "ellipsis",
                        } }, status.label)),
                React.createElement("div", { style: {
                        flex: 1,
                        height: "4px",
                        backgroundColor: "#f3f4f6",
                        borderRadius: "100px",
                        overflow: "hidden",
                    } },
                    React.createElement("div", { style: {
                            width: `${pct}%`,
                            height: "100%",
                            backgroundColor: status.color.toString(),
                            borderRadius: "100px",
                            opacity: 0.7,
                        } })),
                React.createElement("span", { style: {
                        fontSize: "11px",
                        color: status.isDowntime ? "#dc2626" : "#6b7280",
                        fontWeight: status.isDowntime ? 600 : 400,
                        fontVariantNumeric: "tabular-nums",
                        whiteSpace: "nowrap",
                        flexShrink: 0,
                    } }, OneUptimeDate.secondsToFormattedFriendlyTimeString(status.seconds))));
        }))),
        hasIncidents && (React.createElement("div", null,
            React.createElement("div", { style: {
                    display: "flex",
                    alignItems: "center",
                    gap: "6px",
                    marginBottom: "8px",
                } },
                React.createElement("span", { style: {
                        fontSize: "11px",
                        color: "#6b7280",
                        fontWeight: 500,
                        flex: 1,
                    } }, "Incidents"),
                React.createElement("span", { style: {
                        fontSize: "10px",
                        fontWeight: 600,
                        color: "#dc2626",
                        backgroundColor: "#fef2f2",
                        padding: "1px 7px",
                        borderRadius: "9999px",
                        lineHeight: "1.6",
                    } }, props.incidents.length)),
            props.incidents
                .slice(0, 3)
                .map((incident) => {
                const isClickable = Boolean(props.onIncidentClick);
                return (React.createElement("div", { key: incident.id, onClick: isClickable
                        ? (e) => {
                            e.stopPropagation();
                            props.onIncidentClick(incident.id);
                        }
                        : undefined, style: {
                        borderLeft: `3px solid ${incident.incidentSeverity ? incident.incidentSeverity.color.toString() : "#dc2626"}`,
                        padding: "6px 10px",
                        marginBottom: "6px",
                        cursor: isClickable ? "pointer" : "default",
                        transition: "background-color 0.12s ease",
                        backgroundColor: "#fafafa",
                        borderRadius: "0 6px 6px 0",
                    }, onMouseEnter: (e) => {
                        if (isClickable) {
                            e.currentTarget.style.backgroundColor = "#f3f4f6";
                        }
                    }, onMouseLeave: (e) => {
                        if (isClickable) {
                            e.currentTarget.style.backgroundColor = "#fafafa";
                        }
                    } },
                    React.createElement("div", { style: {
                            display: "flex",
                            alignItems: "center",
                            gap: "6px",
                        } },
                        React.createElement("div", { style: {
                                flex: 1,
                                minWidth: 0,
                                fontSize: "12px",
                                color: "#111827",
                                fontWeight: 600,
                                lineHeight: "1.3",
                                overflow: "hidden",
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap",
                            } }, incident.title),
                        isClickable && (React.createElement("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", style: { flexShrink: 0, opacity: 0.35 } },
                            React.createElement("path", { d: "M6 3l5 5-5 5", stroke: "#6b7280", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })))),
                    React.createElement("div", { style: {
                            display: "flex",
                            alignItems: "center",
                            gap: "4px",
                            flexWrap: "wrap",
                            marginTop: "4px",
                        } },
                        incident.incidentSeverity && (React.createElement("span", { style: {
                                fontSize: "9px",
                                fontWeight: 600,
                                color: incident.incidentSeverity.color.toString(),
                                backgroundColor: incident.incidentSeverity.color.toString() + "14",
                                padding: "1px 5px",
                                borderRadius: "3px",
                                lineHeight: "1.6",
                                textTransform: "uppercase",
                                letterSpacing: "0.03em",
                            } }, incident.incidentSeverity.name)),
                        incident.currentIncidentState && (React.createElement("span", { style: {
                                fontSize: "9px",
                                fontWeight: 600,
                                color: incident.currentIncidentState.color.toString(),
                                backgroundColor: incident.currentIncidentState.color.toString() +
                                    "14",
                                padding: "1px 5px",
                                borderRadius: "3px",
                                lineHeight: "1.6",
                                textTransform: "uppercase",
                                letterSpacing: "0.03em",
                            } }, incident.currentIncidentState.name)),
                        React.createElement("span", { style: {
                                fontSize: "10px",
                                color: "#b0b0b0",
                                marginLeft: "auto",
                                whiteSpace: "nowrap",
                            } }, OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(incident.declaredAt, false)))));
            }),
            props.incidents.length > 3 && (React.createElement("div", { style: {
                    fontSize: "11px",
                    color: "#9ca3af",
                    textAlign: "center",
                    padding: "4px 0 0",
                    fontWeight: 500,
                } },
                "+",
                props.incidents.length - 3,
                " more incident",
                props.incidents.length - 3 !== 1 ? "s" : ""))))));
};
export default UptimeBarTooltip;
//# sourceMappingURL=UptimeBarTooltip.js.map