import React, { useRef, useEffect, useCallback, useState } from 'react';
import { Animated, Image, View } from 'react-native';
import BootSplash from 'react-native-bootsplash';
import { useTheme } from '../../branding';
import AnimatedStars from './AnimatedStars';
import ProgressBar from './ProgressBar';
import { VERSION, BUNDLE_VERSION_NAME } from '../../config';
import * as sentryService from '../../services/sentry.service';
import { asError } from '../../utils/error-util';
import { VERSION_FADE_DURATION, VERSION_FADE_DELAY } from './constants';
import styles from './styles';

export const SplashScreenLoader = () => {
    const { images, theme } = useTheme();
    const versionOpacity = useRef(new Animated.Value(0)).current;
    const [isLayoutReady, setIsLayoutReady] = useState(false);
    const [isImageLoaded, setIsImageLoaded] = useState(false);

    useEffect(() => {
        Animated.timing(versionOpacity, {
            toValue: 1,
            duration: VERSION_FADE_DURATION,
            delay: VERSION_FADE_DELAY,
            useNativeDriver: true
        }).start();
    }, [versionOpacity]);

    useEffect(() => {
        if (isLayoutReady && isImageLoaded) {
            requestAnimationFrame(() => {
                BootSplash.hide({ fade: true }).catch(error =>
                    sentryService.logException(asError(error))
                );
            });
        }
    }, [isLayoutReady, isImageLoaded]);

    const handleImageLoad = useCallback(() => {
        setIsImageLoaded(true);
    }, []);

    const handleLayout = useCallback(() => {
        setIsLayoutReady(true);
    }, []);

    return (
        <View style={styles[theme].container} onLayout={handleLayout}>
            <AnimatedStars />
            <View style={styles[theme].logoContainer}>
                <Image
                    source={images.splash}
                    style={styles[theme].logo}
                    resizeMode="contain"
                    onLoad={handleImageLoad}
                />
            </View>
            <View style={styles[theme].progressWrapper}>
                <ProgressBar />
            </View>
            <Animated.Text
                style={{
                    ...styles[theme].version,
                    opacity: versionOpacity
                }}
            >
                v{VERSION} ({BUNDLE_VERSION_NAME})
            </Animated.Text>
        </View>
    );
};

export default SplashScreenLoader;