"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StreamContextMenu = StreamContextMenu;
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_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
const __1 = require("../../..");
const player_store_1 = require("../../../player-store");
const ui_1 = require("../../ui");
function StreamContextMenu({ dropdownPortalContainer, }) {
    const th = (0, ui_1.useTheme)();
    const debugInfo = (0, player_store_1.usePlayerStore)((x) => x.showDebugInfo);
    const setShowDebugInfo = (0, player_store_1.usePlayerStore)((x) => x.setShowDebugInfo);
    const { toggleStopStream } = (0, __1.useLivestreamInfo)();
    const ingest = (0, player_store_1.usePlayerStore)((x) => x.ingestConnectionState);
    const isLive = ingest !== null && ingest !== "new";
    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
    const [hasShownTooltip, setHasShownTooltip] = (0, react_1.useState)(false);
    const tooltipOpacity = (0, react_native_reanimated_1.useSharedValue)(0);
    const tooltipTranslateX = (0, react_native_reanimated_1.useSharedValue)(20);
    (0, react_1.useEffect)(() => {
        if (isLive && !hasShownTooltip) {
            tooltipOpacity.value = (0, react_native_reanimated_1.withDelay)(500, (0, react_native_reanimated_1.withSequence)((0, react_native_reanimated_1.withTiming)(1, { duration: 300 }), (0, react_native_reanimated_1.withDelay)(10000, (0, react_native_reanimated_1.withTiming)(0, { duration: 300 }))));
            tooltipTranslateX.value = (0, react_native_reanimated_1.withDelay)(500, (0, react_native_reanimated_1.withSequence)((0, react_native_reanimated_1.withTiming)(0, { duration: 300 }), (0, react_native_reanimated_1.withDelay)(10000, (0, react_native_reanimated_1.withTiming)(20, { duration: 300 }))));
            setHasShownTooltip(true);
        }
    }, [isLive, hasShownTooltip]);
    const iconRotate = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
        return {
            transform: [
                {
                    rotateZ: (0, react_native_reanimated_1.withTiming)(isOpen ? "240deg" : "0deg", {
                        duration: 650,
                        easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease),
                    }),
                },
            ],
        };
    });
    const tooltipStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
        return {
            opacity: tooltipOpacity.value,
            transform: [{ translateX: tooltipTranslateX.value }],
        };
    });
    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { onOpenChange: setIsOpen, children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuTrigger, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [iconRotate], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Cog, { color: th.theme.colors.foreground }) }), (0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [
                            tooltipStyle,
                            {
                                position: "absolute",
                                right: 30,
                                top: 0,
                                backgroundColor: "rgba(64,64,64,0.95)",
                                borderRadius: 8,
                                paddingHorizontal: 8,
                                paddingRight: 12,
                                paddingVertical: 4,
                                flexDirection: "row",
                                alignItems: "center",
                                gap: 6,
                                zIndex: 9999999,
                                pointerEvents: "box-none",
                                width: 120,
                            },
                        ], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { size: "sm", color: "white", children: "End stream here" }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronRight, { color: "white", size: 16, style: [__1.zero.mr[4]] })] })] }), (0, jsx_runtime_1.jsxs)(ui_1.ResponsiveDropdownMenuContent, { side: "top", align: "end", children: [isLive && ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Stream", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { closeOnPress: true, onPress: () => {
                                toggleStopStream();
                            }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: "Stop Stream" }) }) })), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Show Debug Info" }) }) })] })] }, dropdownPortalContainer));
}
//# sourceMappingURL=streamer-context-menu.js.map