import { useState, useEffect, createContext, useRef } from "react";
import { StyleSheet, Animated } from "react-native";
import { Palette, Style } from "../styles";
import { Image } from "expo-image";

export const SplashAnimationContext = createContext();

const SplashAnimationProvider = ({ children }) => {
  const [isFullyLoaded, setIsFullyLoaded] = useState(false);
  const [showOverlay, setShowOverlay] = useState(true);

  const fadeAnim = useRef(new Animated.Value(1)).current;

  useEffect(() => {
    if (isFullyLoaded) {
      Animated.timing(fadeAnim, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true,
      }).start(() => {
        setShowOverlay(false);
      });
    }
  }, [isFullyLoaded]);

  return (
    <SplashAnimationContext.Provider
      value={{ isFullyLoaded, setIsFullyLoaded }}
    >
      {children}

      {showOverlay && (
        <Animated.View
          style={{
            ...StyleSheet.absoluteFillObject,
            flex: 1,
            ...Style.containerCenter,
            backgroundColor: Palette.darkPurple,
            opacity: fadeAnim,
          }}
        >
          <Image
            source={require("../../assets/splash.png")}
            contentFit={"contain"}
            style={{
              width: 250,
              height: 250,
            }}
          />
        </Animated.View>
      )}
    </SplashAnimationContext.Provider>
  );
};

export default SplashAnimationProvider;