import { useFonts } from 'expo-font'
import { Stack } from 'expo-router'
import * as SplashScreen from 'expo-splash-screen'
import { useEffect } from 'react'

import { GluestackUIProvider } from '../components/ui/gluestack-ui-provider'
import '../global.css'

SplashScreen.preventAutoHideAsync()

const RootLayout = () => {
  const [loaded, error] = useFonts({
    'IBMPlexMono-Bold': require('../assets/fonts/IBMPlexMono-Bold.ttf'),
    'IBMPlexMono-BoldItalic': require('../assets/fonts/IBMPlexMono-BoldItalic.ttf'),
    'IBMPlexMono-ExtraLight': require('../assets/fonts/IBMPlexMono-ExtraLight.ttf'),
    'IBMPlexMono-ExtraLightItalic': require('../assets/fonts/IBMPlexMono-ExtraLightItalic.ttf'),
    'IBMPlexMono-Italic': require('../assets/fonts/IBMPlexMono-Italic.ttf'),
    'IBMPlexMono-Light': require('../assets/fonts/IBMPlexMono-Light.ttf'),
    'IBMPlexMono-LightItalic': require('../assets/fonts/IBMPlexMono-LightItalic.ttf'),
    'IBMPlexMono-Medium': require('../assets/fonts/IBMPlexMono-Medium.ttf'),
    'IBMPlexMono-MediumItalic': require('../assets/fonts/IBMPlexMono-MediumItalic.ttf'),
    'IBMPlexMono-Regular': require('../assets/fonts/IBMPlexMono-Regular.ttf'),
    'IBMPlexMono-SemiBold': require('../assets/fonts/IBMPlexMono-SemiBold.ttf'),
    'IBMPlexMono-SemiBoldItalic': require('../assets/fonts/IBMPlexMono-SemiBoldItalic.ttf'),
    'IBMPlexMono-Thin': require('../assets/fonts/IBMPlexMono-Thin.ttf'),
    'IBMPlexMono-ThinItalic': require('../assets/fonts/IBMPlexMono-ThinItalic.ttf'),
  })

  useEffect(() => {
    if (loaded || error) {
      SplashScreen.hideAsync()
    }
  }, [loaded, error])

  if (!loaded && !error) {
    return null
  }
  return (
    <GluestackUIProvider mode="light">
      <Stack
        screenOptions={{
          contentStyle: { backgroundColor: 'white' },
        }}
      >
        <Stack.Screen name="index" options={{ headerShown: false }} />
      </Stack>
    </GluestackUIProvider>
  )
}

export default RootLayout