const TaskReceiveModal = ({ onClick }) => {
    const spinValue = useRef(new Animated.Value(0)).current;
    const scaleValue = useRef(new Animated.Value(0)).current;
    const spinAnimation = useRef(null);

    const spin = spinValue.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']
    });
    const animate = () => {
        scaleValue.setValue(0);
        Animated.timing(scaleValue, {
            toValue: 1,
            duration: 1000,
            easing: Easing.in(Easing.bounce),
            useNativeDriver: true
        }).start(() => { });
        startSpinAnimation();
    };

    const startSpinAnimation = () => {
        spinValue.setValue(0);
        spinAnimation.current = Animated.timing(spinValue, {
            toValue: 1,
            duration: 1500,
            easing: Easing.linear,
            useNativeDriver: true
        });
        spinAnimation.current.start(({ finished }) => {
            if (finished) {
                spinAnimation.current.stop();
            }
        });
    };


    const coloseHandle = () => {
        onClick && onClick();
    }
    useEffect(() => {
        animate();
        return () => {

        }
    }, []);

    return (
        <>
            <View style={styles.taskReceive}>
                <Animated.View style={[{
                    transform: [
                        { scale: scaleValue }
                    ]
                }]}>
                    <View style={styles.receiveBlock}>
                        <ImageBackground style={styles.receiveBg} source={require('../../../common/images/dressup_pupop_bg.png')} />
                        <View style={styles.receiveContent}>
                            <View style={{ width: '100%', height: pxToPd(44) }}></View>
                            <View style={styles.receiveTitile}>
                                <Text style={styles.receiveTitileTxt}>恭喜你获得徽章</Text>
                            </View>
                            <View style={{ width: '100%', height: pxToPd(22) }}></View>
                            <View style={styles.receiveBox}>
                                <Animated.Image style={[styles.taskReceiveIcon, {
                                    transform: [
                                        { rotateY: spin },
                                    ]
                                }]} source={require('../../../common/images/badge_temp_logo.png')}></Animated.Image>
                            </View>
                            <View style={{ width: '100%', height: pxToPd(22) }}></View>
                            <View style={styles.receiveFooter}>
                                <CustomeBtn name={'确认'} width={500} onClick={coloseHandle} />
                            </View>
                        </View>
                    </View>
                </Animated.View>

            </View>
        </>
    )
}