import React, { useEffect, useRef } from 'react';
import { Animated, Easing, View } from 'react-native';
import LottieView from 'lottie-react-native';
import styles from './styles';
import themes from '../../branding/themes';
import { useTheme } from '../../branding';

const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);

export const ActivityIndicator = () => {
    const { theme } = useTheme();
    const internalProgress = useRef(new Animated.Value(0)).current;
    const animationLoading = themes[theme].animations.pageLoader;

    useEffect(() => {
        const animation = Animated.loop(
            Animated.timing(internalProgress, {
                toValue: 1,
                duration: 2000,
                easing: Easing.linear,
                useNativeDriver: true
            })
        );
        animation.start();

        return () => animation.stop();
    }, []);

    return (
        <View style={styles.container} testID="activityIndicator">
            <AnimatedLottieView
                source={animationLoading}
                progress={internalProgress}
                style={{ width: 115, height: 115 }}
            />
        </View>
    );
};

export default ActivityIndicator;