import "../tamagui-web.css"
import { useEffect } from 'react'
import { ToastWrapper } from './../components/toastwrapper'
import { StatusBar, useColorScheme } from 'react-native'
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
import { useFonts } from 'expo-font'
import { SplashScreen, Stack, Slot } from 'expo-router'
import { Provider } from './Provider'
import { useTheme, Button, Anchor, XStack } from 'tamagui'
import { ArrowLeft, ArrowRight } from '@tamagui/lucide-icons';
import {useAuth,AuthProvider} from "contexts/authcontext"
import { useRouter } from 'expo-router'
import { Platform } from 'react-native';


export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router'


export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: '(tabs)',
  
}

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync()

export default function RootLayout() {
  const [interLoaded, interError] = useFonts({
    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
  })

  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log("test")
    }, 10000)
    return () => clearInterval(intervalId)
  }, [])

  useEffect(() => {
    if (interLoaded || interError) {
      // Hide the splash screen after the fonts have loaded (or an error was returned) and the UI is ready.
      SplashScreen.hideAsync()
    }
  }, [interLoaded, interError])

  if (!interLoaded && !interError) {
    return null
  }

  return (
    <>
    <AuthProvider>
    <Providers>
      <ToastWrapper />
      <Slot/>
    </Providers>
    </AuthProvider>
    
    </>
  )
}

const Providers = ({ children }: { children: React.ReactNode }) => {
  return <Provider>{children}</Provider>
}

function RootLayoutNav() {
  const {isLoggedIn, logout,} = useAuth()
  const colorScheme = useColorScheme()
  const theme = useTheme()
  const router = useRouter()
  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <StatusBar barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'} />
      <Stack>
        <Stack.Screen
          name="(tabs)"
          options={{
            headerShown: false,
          }}
        />
        <Stack.Screen
          name='(auth)'
          options={{
            title: "Authentication",
            headerShown:true,
            headerLeft: () => (
              <XStack>
                <Anchor href='/'>
                  <Button icon={ArrowLeft}></Button>
                </Anchor>
              </XStack>
              
            ),
            headerRight: () => (
              !isLoggedIn ? (
                <XStack gap="$3">
                  
                <Button onPress={router.replace("/login")}>Login</Button>
             
              <Anchor href='/signup'>
              <Button>Sign-Up</Button>
              </Anchor>
              </XStack>
                
                
              ):(<Button onPress={logout}>Logout</Button>)
            ),
          }}
          >

        </Stack.Screen>
        <Stack.Screen
          name="modal"
          options={{
            title: 'Tamagui + Expo',
            presentation: 'modal',
            animation: 'slide_from_right',
            gestureEnabled: true,
            gestureDirection: 'horizontal',
            contentStyle: {
              backgroundColor: theme.background.val,
            },
          }}
        />
      </Stack>
    </ThemeProvider>
  )
}