"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DanmuMessage = void 0;
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 ui_1 = require("../ui");
const math_1 = require("./math");
exports.DanmuMessage = (0, react_1.memo)(({ message, lane, laneHeight, videoTop, opacity, fontSize, speed, containerWidth, containerHeight, onComplete, onWidthMeasured, }) => {
    const translateX = (0, react_native_reanimated_1.useSharedValue)(containerWidth);
    const [messageWidth, setMessageWidth] = (0, react_1.useState)(0);
    const [animationStartTime, setAnimationStartTime] = (0, react_1.useState)(null);
    const [totalDuration, setTotalDuration] = (0, react_1.useState)(0);
    const getRgbColor = (color = { red: 123, green: 123, blue: 123 }) => {
        const red = (0, math_1.mapRange)(color.red, 0, 255, 100, 230);
        const green = (0, math_1.mapRange)(color.green, 0, 255, 100, 230);
        const blue = (0, math_1.mapRange)(color.blue, 0, 255, 100, 230);
        return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`;
    };
    const handleLayout = (event) => {
        const width = event.nativeEvent.layout.width;
        if (width > 0) {
            setMessageWidth(width);
            if (onWidthMeasured) {
                onWidthMeasured(message.uri, width);
            }
        }
    };
    (0, react_1.useEffect)(() => {
        if (messageWidth === 0)
            return; // Wait for layout measurement
        const duration = (0, math_1.baseDuration)(message, math_1.MAX_DURATION, math_1.MIN_DURATION);
        // Calculate how much time has elapsed if animation already started
        let remainingDuration = duration;
        let startPosition = containerWidth;
        if (animationStartTime !== null) {
            const elapsed = Date.now() - animationStartTime;
            const progress = Math.min(elapsed / totalDuration, 1);
            remainingDuration = duration * (1 - progress);
            startPosition =
                containerWidth + progress * (-messageWidth - containerWidth);
        }
        else {
            setAnimationStartTime(Date.now());
            setTotalDuration(duration);
        }
        if (__DEV__)
            console.log(`[danmu] animation started: "${message.record.text}" (duration: ${duration.toFixed(0)}ms, remaining: ${remainingDuration.toFixed(0)}ms, speed: ${speed}x)`);
        translateX.value = startPosition;
        translateX.value = (0, react_native_reanimated_1.withTiming)(-messageWidth, {
            duration: remainingDuration,
            easing: react_native_reanimated_1.Easing.linear,
        }, (finished) => {
            if (finished) {
                (0, react_native_reanimated_1.runOnJS)(onComplete)(message.uri);
            }
        });
    }, [
        messageWidth,
        containerWidth,
        speed,
        message.uri,
        message.record.text.length,
        lane,
        onComplete,
    ]);
    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
        return {
            transform: [{ translateX: translateX.value }],
        };
    });
    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
            styles.container,
            {
                top: videoTop + lane * laneHeight,
                opacity: opacity / 100,
            },
            animatedStyle,
        ], onLayout: handleLayout, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [
                styles.text,
                {
                    fontSize,
                    color: getRgbColor(message.chatProfile?.color),
                },
            ], numberOfLines: 1, children: message.record.text }) }));
}, (prevProps, nextProps) => {
    return (prevProps.message.uri === nextProps.message.uri &&
        prevProps.lane === nextProps.lane &&
        prevProps.laneHeight === nextProps.laneHeight &&
        prevProps.videoTop === nextProps.videoTop &&
        prevProps.opacity === nextProps.opacity &&
        prevProps.fontSize === nextProps.fontSize &&
        prevProps.speed === nextProps.speed &&
        prevProps.containerWidth === nextProps.containerWidth &&
        prevProps.containerHeight === nextProps.containerHeight);
});
const styles = react_native_1.StyleSheet.create({
    container: {
        position: "absolute",
        left: 0,
    },
    text: {
        color: "white",
        textShadowColor: "rgba(0, 0, 0, 0.8)",
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 64,
        fontWeight: "600",
    },
});
//# sourceMappingURL=danmu-message.js.map