"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MetricsPanel = MetricsPanel;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const lucide_react_native_1 = require("lucide-react-native");
const useSegmentTiming_1 = require("../../../hooks/useSegmentTiming");
const atoms = tslib_1.__importStar(require("../../../lib/theme/atoms"));
const ui_1 = require("../../ui");
function MetricsPanel({ showMetrics }) {
    const { connectionQuality, segmentDeltas, mean, range } = (0, useSegmentTiming_1.useSegmentTiming)();
    let icon = (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleX, { color: "#d44" });
    let color = "#d44";
    if (connectionQuality === "pre-live") {
        icon = (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleCheck, { color: atoms.colors.blue[500] });
        color = atoms.colors.blue[500];
    }
    else if (connectionQuality === "good") {
        icon = (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleCheck, { color: "#4d4" });
        color = "#4d4";
    }
    else if (connectionQuality === "degraded") {
        icon = (0, jsx_runtime_1.jsx)(lucide_react_native_1.AlertCircle, { color: "#aa4" });
        color = "#aa4";
    }
    else {
        icon = (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleX, { color: "#d44" });
        color = "#d44";
    }
    const connectionText = () => {
        if (connectionQuality === "pre-live") {
            return "READY TO STREAM";
        }
        else if (connectionQuality === "good") {
            return "GOOD";
        }
        else if (connectionQuality === "degraded") {
            return "DEGRADED";
        }
        else {
            return "POOR";
        }
    };
    return ((0, jsx_runtime_1.jsxs)(ui_1.View, { style: {
            alignItems: "center",
            gap: 8,
        }, children: [(0, jsx_runtime_1.jsxs)(ui_1.View, { style: {
                    flexDirection: "row",
                    alignItems: "center",
                    padding: 10,
                    backgroundColor: "rgba(0, 0, 0, 0.5)",
                    borderRadius: 8,
                    gap: 4,
                }, children: [icon, (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [
                            atoms.pt[0],
                            {
                                color,
                            },
                        ], children: connectionText() })] }), showMetrics && ((0, jsx_runtime_1.jsxs)(ui_1.View, { children: [(0, jsx_runtime_1.jsxs)(ui_1.Text, { children: ["last \u0394:", " ", segmentDeltas.length > 0
                                ? segmentDeltas[segmentDeltas.length - 1]
                                : "—"] }), (0, jsx_runtime_1.jsxs)(ui_1.Text, { children: ["mean: ", mean] }), (0, jsx_runtime_1.jsxs)(ui_1.Text, { children: ["range: ", range] })] }))] }));
}
//# sourceMappingURL=metrics.js.map