"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CountdownOverlay = CountdownOverlay;
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"));
function CountdownOverlay({ visible, width, height, startFrom = 3, onDone, }) {
    const [countdown, setCountdown] = (0, react_1.useState)(startFrom);
    const startTimestamp = (0, react_native_reanimated_1.useSharedValue)(null);
    const done = (0, react_native_reanimated_1.useSharedValue)(false);
    // Animation values
    const scale = (0, react_native_reanimated_1.useSharedValue)(1);
    const opacity = (0, react_native_reanimated_1.useSharedValue)(1);
    const updateCountdown = (value) => {
        setCountdown(value);
    };
    const handleDone = () => {
        if (onDone)
            onDone();
    };
    // Accurate countdown using useFrameCallback
    (0, react_native_reanimated_1.useFrameCallback)(({ timestamp }) => {
        if (!visible)
            return;
        // Set start timestamp on first frame
        if (startTimestamp.value === null) {
            startTimestamp.value = timestamp;
            return;
        }
        const elapsed = (timestamp - startTimestamp.value) / 1000; // Convert to seconds
        const remaining = Math.max(0, startFrom - Math.floor(elapsed));
        // Use runOnJS to call JavaScript functions from worklet
        (0, react_native_reanimated_1.runOnJS)(updateCountdown)(remaining);
        if (remaining === 0 && !done.value) {
            done.value = true;
            (0, react_native_reanimated_1.runOnJS)(handleDone)();
        }
    });
    (0, react_1.useEffect)(() => {
        if (visible) {
            startTimestamp.value = null; // Will be set on first frame
            setCountdown(startFrom);
            done.value = false;
        }
        else {
            setCountdown(startFrom);
        }
    }, [visible, startFrom]);
    // Animate scale and opacity on countdown change
    (0, react_1.useEffect)(() => {
        if (visible && countdown > 0) {
            scale.value = 1;
            opacity.value = 1;
            scale.value = (0, react_native_reanimated_1.withTiming)(1.5, { duration: 1000 });
            opacity.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 1000 });
        }
    }, [countdown, visible, scale, opacity]);
    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
        transform: [{ scale: scale.value }],
        opacity: opacity.value,
    }));
    if (!visible || countdown === 0)
        return null;
    return ((0, jsx_runtime_1.jsx)(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,
        }, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.Text, { style: [
                {
                    color: "white",
                    fontSize: 120,
                    fontWeight: "bold",
                },
                animatedStyle,
            ], children: typeof countdown === "number" ? countdown : "" }) }));
}
//# sourceMappingURL=countdown.js.map