import { QueryClientProvider, QueryClient } from 'react-query';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import WelcomeScreen from './src/screens/WelcomeScreen';
import { NAVIGATION_PAGES } from './src/types';

const ScreenStack = createStackNavigator();
const BottomTab = createBottomTabNavigator();

export default function App() {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <NavigationContainer>
        <ScreenStack.Navigator
          screenOptions={{ headerShown: false }}
          initialRouteName={NAVIGATION_PAGES.IN_APP}
        >
          <ScreenStack.Screen name={NAVIGATION_PAGES.WELCOME} component={WelcomeScreen} />
          <ScreenStack.Screen name={NAVIGATION_PAGES.IN_APP}>
            {() => (
              <BottomTab.Navigator
                screenOptions={() => ({
                  headerShown: false
                })}
              >
                <BottomTab.Screen name={NAVIGATION_PAGES.LOCATION_TAB} component={WelcomeScreen} />
                <BottomTab.Screen name={NAVIGATION_PAGES.TRAVELS_TAB} component={WelcomeScreen} />
                <BottomTab.Screen name={NAVIGATION_PAGES.PROFILE_TAB} component={WelcomeScreen} />
              </BottomTab.Navigator>
            )}
          </ScreenStack.Screen>
        </ScreenStack.Navigator>
      </NavigationContainer>
    </QueryClientProvider>
  );
}