import React, { useEffect } from "react";
import { View } from "react-native";
import Svg, { Path } from "react-native-svg";
import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from "react-native-reanimated";
import { useColorScheme } from "nativewind";
import { ENTROPY_MARK_ASPECT, ENTROPY_MARK_PATH, ENTROPY_MARK_STEP, ENTROPY_MARK_VIEWBOX, } from "./entropy-mark";
const COLORS = {
    light: { src: "#000000", echo: { 3: "#cbcbcb", 2: "#a3a3a3", 1: "#525252" } },
    dark: { src: "#ffffff", echo: { 3: "#373737", 2: "#5f5f5f", 1: "#8c8c8c" } },
};
// Order the pulse travels: sharp source first → out through the echoes.
const DEPTHS = [0, 1, 2, 3]; // 0 = source
const COUNT = DEPTHS.length;
function Layer({ prog, index, width, size, color, offsetX, offsetY, }) {
    const style = useAnimatedStyle(() => {
        // Triangular pulse centered on this layer's slot; near-zero at the
        // neighbours' centers so only one layer is lit at a time. Wraps so the
        // loop has no seam.
        const center = (index + 0.5) / COUNT;
        let d = Math.abs(prog.value - center);
        d = Math.min(d, 1 - d);
        const opacity = Math.max(0, Math.min(1, 1 - d * COUNT * 1.15));
        return { opacity };
    });
    return (<Animated.View style={[
            {
                position: "absolute",
                width,
                height: size,
                pointerEvents: "none",
                transform: [{ translateX: offsetX }, { translateY: offsetY }],
            },
            style,
        ]}>
      <Svg width={width} height={size} viewBox={ENTROPY_MARK_VIEWBOX}>
        <Path d={ENTROPY_MARK_PATH} fillRule="evenodd" fill={color}/>
      </Svg>
    </Animated.View>);
}
export function EntropyMarkSequential({ size = 96, scheme, durationMs = 1000, }) {
    const { colorScheme } = useColorScheme();
    const c = COLORS[scheme ?? (colorScheme === "dark" ? "dark" : "light")];
    const width = Math.round(size * ENTROPY_MARK_ASPECT);
    const prog = useSharedValue(0);
    useEffect(() => {
        prog.value = withRepeat(withTiming(1, { duration: durationMs, easing: Easing.linear }), -1, false);
    }, [prog, durationMs]);
    return (<View style={{ width, height: size }}>
      {DEPTHS.map((depth, index) => (<Layer key={depth} prog={prog} index={index} width={width} size={size} color={depth === 0 ? c.src : c.echo[depth]} offsetX={depth * ENTROPY_MARK_STEP.x} offsetY={depth * ENTROPY_MARK_STEP.y}/>))}
    </View>);
}
export default EntropyMarkSequential;
//# sourceMappingURL=entropy-mark-sequential.jsx.map