import React, { useEffect, useRef } from 'react';
import { Animated, StyleSheet, View } from 'react-native';

const Loading = () => {
    // 创建三个动画值，控制每个点的大小变化
    const anim1 = useRef(new Animated.Value(0)).current;
    const anim2 = useRef(new Animated.Value(0)).current;
    const anim3 = useRef(new Animated.Value(0)).current;

    // 定义动画序列
    const startAnimation = () => {
        // 重置动画值
        anim1.setValue(0);
        anim2.setValue(0);
        anim3.setValue(0);

        // 创建动画序列
        Animated.loop(
            Animated.stagger(200, [
                // 第一个点动画
                Animated.sequence([
                    Animated.timing(anim1, {
                        toValue: 1,
                        duration: 400,
                        useNativeDriver: true,
                    }),
                    Animated.timing(anim1, {
                        toValue: 0,
                        duration: 400,
                        useNativeDriver: true,
                    }),
                ]),
                // 第二个点动画
                Animated.sequence([
                    Animated.timing(anim2, {
                        toValue: 1,
                        duration: 400,
                        useNativeDriver: true,
                    }),
                    Animated.timing(anim2, {
                        toValue: 0,
                        duration: 400,
                        useNativeDriver: true,
                    }),
                ]),
                // 第三个点动画
                Animated.sequence([
                    Animated.timing(anim3, {
                        toValue: 1,
                        duration: 400,
                        useNativeDriver: true,
                    }),
                    Animated.timing(anim3, {
                        toValue: 0,
                        duration: 400,
                        useNativeDriver: true,
                    }),
                ]),
            ])
        ).start();
    };

    useEffect(() => {
        startAnimation();
        return () => {
            // 清理动画
            anim1.stopAnimation();
            anim2.stopAnimation();
            anim3.stopAnimation();
        };
    }, []);

    // 颜色插值
    const color1 = anim1.interpolate({
        inputRange: [0, 0.5, 1],
        outputRange: ['#999999', '#4C320C', '#999999'],
    });

    const color2 = anim2.interpolate({
        inputRange: [0, 0.5, 1],
        outputRange: ['#999999', '#4C320C', '#999999'],
    });

    const color3 = anim3.interpolate({
        inputRange: [0, 0.5, 1],
        outputRange: ['#999999', '#4C320C', '#999999'],
    });

    return (
        <View style={styles.container}>
            <Animated.View style={[styles.dot, { backgroundColor: color1 }]} />
            <Animated.View style={[styles.dot, { backgroundColor: color2 }]} />
            <Animated.View style={[styles.dot, { backgroundColor: color3 }]} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 8,
    },
    dot: {
        width: 8,
        height: 8,
        borderRadius: 4,
        marginHorizontal: 4,
        backgroundColor: '#999999',
    },
});

export default Loading;