"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProblemsWrapper = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const lucide_react_native_1 = require("lucide-react-native");
const react_1 = require("react");
const react_native_1 = require("react-native");
const livestream_store_1 = require("../../livestream-store");
const zero = tslib_1.__importStar(require("../../ui"));
const ui_1 = require("../ui");
const { bg, r, borders, p, text, layout, gap } = zero;
const getIcon = (severity) => {
    switch (severity) {
        case "error":
            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleX, { size: 24, color: "white" });
        case "warning":
            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleAlert, { size: 24, color: "white" });
        case "info":
            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.Info, { size: 24, color: "white" });
        default:
            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.Sparkle, { size: 24, color: "white" });
    }
};
const Problems = ({ probs, onIgnore, }) => {
    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[4]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[2]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { size: "2xl", style: [text.white, { fontWeight: "600" }], children: "Optimize Your Stream" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.gray[300]], children: "We've found a few things that could improve your stream's reliability." })] }), probs.map((p) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                        gap.all[2],
                        layout.flex.row,
                        layout.flex.alignCenter,
                        { gap: 8, alignItems: "flex-start" },
                    ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                zero.r.full,
                                zero.p[1],
                                {
                                    backgroundColor: p.severity === "error"
                                        ? "#7f1d1d"
                                        : p.severity === "warning"
                                            ? "#7c2d12"
                                            : "#1e3a8a",
                                },
                            ], children: getIcon(p.severity) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ flex: 1 }, gap.all[1]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.white, { fontWeight: "600" }], children: p.code }), (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.gray[400], { fontSize: 14 }], children: p.message }), p.link && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => p.link && react_native_1.Linking.openURL(p.link), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                            layout.flex.row,
                                            layout.flex.alignCenter,
                                            gap.all[2],
                                        ], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [{ color: "#3b82f6", fontSize: 14 }], children: "Learn More" }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ExternalLink, { size: 12, color: "#3b82f6" })] }) }))] })] }) }, p.message))), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.row, layout.flex.justify.end], children: (0, jsx_runtime_1.jsx)(ui_1.Button, { onPress: onIgnore, variant: "secondary", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.white, { fontWeight: "600" }], children: "Acknowledge" }) }) })] }));
};
exports.ProblemsWrapper = (0, react_1.forwardRef)(({ children }, ref) => {
    const problems = (0, livestream_store_1.useLivestreamStore)((x) => x.problems);
    const [dismiss, setDismiss] = (0, react_1.useState)(false);
    (0, react_1.useImperativeHandle)(ref, () => ({
        setDismiss,
    }));
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, problems.length > 0 && !dismiss && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                    {
                        position: "absolute",
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                        backgroundColor: "rgba(0, 0, 0, 0.8)",
                        zIndex: 100,
                    },
                    layout.flex.center,
                    { justifyContent: "flex-start" },
                    p[12],
                ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                        bg.neutral[900],
                        borders.color.neutral[700],
                        borders.width.thin,
                        r.lg,
                        p[8],
                        { maxWidth: 700, width: "100%" },
                    ], children: (0, jsx_runtime_1.jsx)(Problems, { probs: problems, onIgnore: () => setDismiss(true) }) }) }))] }));
});
exports.default = Problems;
//# sourceMappingURL=problems.js.map