import {FunctionComponent} from 'react'
import ThemeProvider from '../context/themeProvider'
import {Tabs} from 'expo-router'
import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
import {GestureHandlerRootView} from 'react-native-gesture-handler'
import {Icon} from '@/components/ui/icon'
import {CircleUserRound, MessageSquare} from 'lucide-react-native'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: !__DEV__,
      staleTime: Infinity,
    },
  },
})

const RootLayout: FunctionComponent = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <GestureHandlerRootView style={[{flex: 1}]}>
        <ThemeProvider>
          <Tabs
            screenOptions={{
              headerShadowVisible: false,
              tabBarStyle: {
                borderTopWidth: 0,
                elevation: 0,
                shadowOffset: {
                  width: 0,
                  height: 0,
                },
              },
            }}>
            <Tabs.Screen name="index" redirect />

            <Tabs.Screen
              name="(tabs)/login"
              options={{
                title: 'Login',
                tabBarIcon: ({color, size}) => <Icon size={size} color={color} as={MessageSquare} />,
              }}
            />
            <Tabs.Screen
              name="(tabs)/account"
              options={{
                title: 'Account',
                tabBarIcon: ({color, size}) => <Icon size={size} color={color} as={CircleUserRound} />,
              }}
            />
          </Tabs>
        </ThemeProvider>
      </GestureHandlerRootView>
    </QueryClientProvider>
  )
}

export default RootLayout
