"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LoadingOverlay = LoadingOverlay;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
const atoms_1 = require("../../../lib/theme/atoms");
const defaultMessages = [
    "Creating the stream",
    "Uploading thumbnails",
    "Getting things ready",
    "Doing some magic",
    "Preparing something special",
    "Reticulating splines",
    "Making it nice",
    "Flipping some switches",
    "Adding good vibes",
    "Almost there",
    "Summoning your Persona",
    "Awakening our true selves",
    "Fusion in progress",
    "Equipping the right materia",
];
function LoadingOverlay({ visible, width, height, subtitle, messages = defaultMessages, interval = 3000, }) {
    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
    const [shouldRender, setShouldRender] = (0, react_1.useState)(visible);
    // Animation values
    const translateY = (0, react_native_reanimated_1.useSharedValue)(0);
    const opacity = (0, react_native_reanimated_1.useSharedValue)(1);
    const wholeOpacity = (0, react_native_reanimated_1.useSharedValue)(0);
    // Handle fade-in and fade-out animations
    (0, react_1.useEffect)(() => {
        if (visible) {
            setShouldRender(true); // Ensure the component is mounted
            wholeOpacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 500 }); // Fade in
        }
        else {
            wholeOpacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 500 }, () => {
                // Unmount after fade-out
                (0, react_native_reanimated_1.runOnJS)(setShouldRender)(false);
            });
        }
    }, [visible]);
    // Cycle messages on a timer
    (0, react_1.useEffect)(() => {
        if (!visible) {
            setCurrentIndex(0);
            return;
        }
        const timeout = setTimeout(() => {
            setCurrentIndex((prev) => (prev + 1) % messages.length);
        }, interval);
        return () => clearTimeout(timeout);
    }, [visible, currentIndex, interval, messages.length]);
    // Trigger animation on each message change
    (0, react_1.useEffect)(() => {
        if (!visible)
            return;
        const fadeDuration = Math.min(interval / 2, 250); // Simplified fade duration
        // Reset animation values
        translateY.value = 20;
        opacity.value = 0;
        // Sequential fade-in and fade-out
        translateY.value = (0, react_native_reanimated_1.withTiming)(0, { duration: fadeDuration });
        opacity.value = (0, react_native_reanimated_1.withTiming)(1, { duration: fadeDuration }, () => {
            // add a delay for interval - (fadeDuration*2)
            translateY.value = (0, react_native_reanimated_1.withDelay)(interval - fadeDuration * 2, (0, react_native_reanimated_1.withTiming)(-10, { duration: fadeDuration }));
            opacity.value = (0, react_native_reanimated_1.withDelay)(interval - fadeDuration * 2, (0, react_native_reanimated_1.withTiming)(0, { duration: fadeDuration }));
        });
    }, [currentIndex, visible]);
    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
        return {
            transform: [{ translateY: translateY.value }],
            opacity: opacity.value,
        };
    });
    const wholeAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
        opacity: wholeOpacity.value,
    }));
    if (!shouldRender)
        return null;
    return ((0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [
            {
                position: "absolute",
                top: 0,
                left: 0,
                width,
                height,
                backgroundColor: "rgba(0,0,0,0.7)",
                alignItems: "center",
                justifyContent: "center",
                zIndex: 1000,
            },
            wholeAnimatedStyle,
        ], children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.Text, { style: [
                    {
                        color: "white",
                        fontSize: 24,
                        fontWeight: "bold",
                    },
                    animatedStyle,
                ], children: messages[currentIndex] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.Text, { style: [atoms_1.pt[5], { color: "#a0a0a0" }], children: subtitle })] }));
}
//# sourceMappingURL=streamer-loading-overlay.js.map