import type {FunctionComponent} from 'react'
import ThemeProvider from '@/context/themeProvider'
import {Tabs} from 'expo-router'
import {BookmarkCheck, ListTodoIcon, TagIcon} from 'lucide-react-native'
import {GestureHandlerRootView} from 'react-native-gesture-handler'
import '@/global.css'
import {QueryClient, QueryClientProvider} from '@tanstack/react-query'

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

const RootLayout: FunctionComponent = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <GestureHandlerRootView>
        <ThemeProvider>
          <Tabs>
            {/**
             * Elk scherm moet vermeld worden via een Navigator.Screen component, in dit geval dus
             * Tabs.Screen.
             * Elke file in de app directory moet ofwel een pagina zijn, ofwel een layout file (of een
             * server-actie, maar die worden niet besproken in deze cursus).
             * Als je een file toevoegt in de app map, die niet vermeld is in een Navigator (drawer, tab,
             * stack) component, wordt deze toch getoond als een pagina in de app.
             * Daarom is het belangrijk om een aparte components map te gebruiken die buiten de app map
             * geplaatst is.
             **/}

            {/**
             * Als redirect op true staat, wordt de component niet getoond in de Navigator.
             * De drawer zal dus geen link naar index bevatten.
             * Toch kunnen we deze pagina niet weghalen omdat elke app een /app/index.tsx moet bevatten.
             * De navigator zal, als redirect op true staat, de gebruiker redirecten naar de eerste pagina in de navigator.
             * In dit geval dus de Tasks pagina.
             **/}
            <Tabs.Screen name="index" redirect />
            <Tabs.Screen
              name="tasks"
              options={{
                title: 'Tasks',
                headerShown: false,
                tabBarIcon: ({color, size}) => <ListTodoIcon size={size} color={color} />,
              }}
            />
            <Tabs.Screen
              name="labels"
              options={{
                title: 'Labels',
                headerShown: false,
                tabBarIcon: ({color, size}) => <TagIcon size={size} color={color} />,
              }}
            />
            <Tabs.Screen
              name="tasksByLabel"
              options={{
                headerShown: false,
                title: 'Tasks by label',
                tabBarIcon: ({color, size}) => <BookmarkCheck size={size} color={color} />,
              }}
            />
          </Tabs>
        </ThemeProvider>
      </GestureHandlerRootView>
    </QueryClientProvider>
  )
}

export default RootLayout
