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