"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TeleportNotification = TeleportNotification;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
const __1 = require("../../");
function TeleportNotification({ targetHandle, countdown, canCancel, startTime, onDismiss, }) {
    const { zero: z } = (0, __1.useTheme)();
    const w = (0, react_native_1.useWindowDimensions)().width;
    const [start, setStart] = (0, react_1.useState)(Date.now());
    const [now, setNow] = (0, react_1.useState)(Date.now());
    const [dismissed, setDismissed] = (0, react_1.useState)(false);
    (0, react_1.useEffect)(() => {
        const interval = setInterval(() => {
            setNow(Date.now());
        }, 100);
        return () => clearInterval(interval);
    }, []);
    const timeLeft = Math.max(0, countdown - Math.floor((now - start) / 1000));
    (0, react_1.useEffect)(() => {
        if (dismissed) {
            return;
        }
        if (timeLeft <= 0) {
            setDismissed(true);
            onDismiss("auto");
        }
    }, [dismissed, onDismiss, timeLeft]);
    // if we're past 5 seconds from start, stripes should already be hidden
    const elapsedTime = startTime ? (Date.now() - startTime) / 1000 : 0;
    const [showStripes, setShowStripes] = (0, react_1.useState)(elapsedTime < 5);
    const stripeX = (0, react_native_reanimated_1.useSharedValue)(0);
    const stripeOpacity = (0, react_native_reanimated_1.useSharedValue)(1);
    const progressWidth = (0, react_native_reanimated_1.useSharedValue)(100);
    (0, react_1.useEffect)(() => {
        // if stripes are already hidden, fade out asap and return
        if (!showStripes) {
            stripeOpacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 0 });
            return;
        }
        // warning stripes animation
        stripeX.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(30 * 2, {
            duration: 1000,
            easing: react_native_reanimated_1.Easing.linear,
        }), 3, false);
        // hide stripes after 500ms
        const stripesTimer = setTimeout(() => {
            // woosh the stripes off to the right before hiding
            stripeX.value = (0, react_native_reanimated_1.withTiming)(30 * 80, {
                duration: 1500,
                easing: react_native_reanimated_1.Easing.cubic,
            });
            // after animation, set stripes as hidden
            setTimeout(() => {
                setShowStripes(false);
            }, 350);
        }, 1500);
        return () => clearTimeout(stripesTimer);
    }, []);
    (0, react_1.useEffect)(() => {
        if (showStripes)
            return;
        // animate progress bar
        const percentage = (timeLeft / countdown) * 100;
        progressWidth.value = (0, react_native_reanimated_1.withTiming)(percentage, {
            duration: 1000,
            easing: react_native_reanimated_1.Easing.linear,
        });
    }, [timeLeft, countdown, showStripes]);
    const stripesStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
        opacity: stripeOpacity.value,
        transform: [{ translateX: stripeX.value }],
    }));
    const progressStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
        width: `${progressWidth.value}%`,
    }));
    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ overflow: "hidden" }, __1.zero.r.lg, __1.zero.bg.neutral[900]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                    __1.zero.layout.flex.row,
                    __1.zero.layout.flex.alignCenter,
                    __1.zero.layout.flex.spaceBetween,
                    __1.zero.px[3],
                    w > 650 ? __1.zero.py[4] : __1.zero.py[2],
                ], children: [(0, jsx_runtime_1.jsxs)(__1.Text, { size: w > 650 ? "xl" : "base", children: ["Teleporting to @", targetHandle] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                            __1.zero.layout.flex.row,
                            __1.zero.layout.flex.alignCenter,
                            __1.zero.gap.all[3],
                        ], children: [(0, jsx_runtime_1.jsxs)(__1.Text, { color: "muted", children: [timeLeft, "s"] }), canCancel && ((0, jsx_runtime_1.jsx)(__1.Button, { onPress: () => onDismiss("user"), width: "min", variant: "destructive", children: "Cancel" }))] })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                    height: 4,
                    width: "100%",
                    borderRadius: 2,
                    overflow: "hidden",
                    backgroundColor: "#0f0f1e",
                }, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
                        { height: "100%", borderRadius: 2, backgroundColor: "#16f4d0" },
                        progressStyle,
                    ] }) }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
                    {
                        position: "absolute",
                        flexDirection: "row",
                        height: 180,
                        width: "200%",
                        //clickthrough
                        pointerEvents: "none",
                    },
                    stripesStyle,
                ], children: [...Array(80)].map((_, i) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                        width: 30,
                        height: "100%",
                        backgroundColor: i % 2 === 0 ? "#FFA500" : "#000000",
                        transform: [{ skewX: "-45deg" }, { translateX: -30 * 8 }],
                    } }, i))) })] }));
}
//# sourceMappingURL=teleport-notification.js.map