import { useFonts } from 'expo-font';
import { SplashScreen, Stack } from 'expo-router';
import { useEffect } from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import { AuthProvider } from '@/providers/AuthProvider';
import { Palette } from '@/constants/palette';

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    'Catamaran-SemiBold': require('@/assets/fonts/Catamaran/static/Catamaran-SemiBold.ttf'),
    'Catamaran-Bold': require('@/assets/fonts/Catamaran/static/Catamaran-Bold.ttf'),
    'Catamaran-ExtraBold': require('@/assets/fonts/Catamaran/static/Catamaran-ExtraBold.ttf'),
    'FunnelSans-Regular': require('@/assets/fonts/Funnel_Sans/static/FunnelSans-Regular.ttf'),
    'FunnelSans-Medium': require('@/assets/fonts/Funnel_Sans/static/FunnelSans-Medium.ttf'),
    'FunnelSans-SemiBold': require('@/assets/fonts/Funnel_Sans/static/FunnelSans-SemiBold.ttf'),
    'FunnelSans-Bold': require('@/assets/fonts/Funnel_Sans/static/FunnelSans-Bold.ttf'),
  });

  useEffect(() => {
    if (fontsLoaded) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    <SafeAreaProvider>
      <AuthProvider>
        <Stack>
          <Stack.Screen name="login" options={{ headerShown: false }} />
          <Stack.Screen name="register" options={{ headerShown: false }} />
          <Stack.Screen
            name="profile"
            options={{
              title: 'Profile',
              headerStyle: { backgroundColor: Palette.cream },
              headerShadowVisible: false,
            }}
          />
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        </Stack>
      </AuthProvider>
    </SafeAreaProvider>
  );
}