import React, { useEffect } from 'react';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

import GlobeIcon from './assets/icons/globe.svg';
import PeoplesIcon from './assets/icons/peoples.svg';
import ProfileIcon from './assets/icons/profile.svg';
import MapIcon from './assets/icons/map.svg';

import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import WelcomeScreen from './src/screens/WelcomeScreen';
import LoginScreen from './src/screens/LoginScreen';
import ResetPasswordScreen from './src/screens/ResetPasswordScreen';
import ResetPasswordDeepScreen from './src/screens/ResetPasswordDeepScreen';
import JoinUsScreen from './src/screens/RegisterScreen/JoinUs';
import EditAccount from './src/screens/RegisterScreen/EditAccount';

import TravelsScreen from './src/screens/InAppScreens/TravelsScreen';
import ProfileScreen from './src/screens/InAppScreens/ProfileScreen';
import MapScreen from './src/screens/InAppScreens/MapScreen';
import TravellersScreen from './src/screens/InAppScreens/TravellersScreen';

import { NAVIGATION_PAGES } from './src/types';
import { storageGet } from './src/storage';

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

SplashScreen.preventAutoHideAsync();

const Route = () => {
  const [fontsLoaded] = useFonts({
    'redhat-900': require('./assets/fonts/RedHatDisplay-Black-900.ttf'),
    'redhat-700': require('./assets/fonts/RedHatDisplay-Bold-700.ttf'),
    'redhat-600': require('./assets/fonts/RedHatDisplay-SemiBold-600.ttf')
  });

  useEffect(() => {
    const hideSplashScreen = async () => {
      if (fontsLoaded) {
        await SplashScreen.hideAsync();
      }
    };

    hideSplashScreen();
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  let token: string | null = '';
  storageGet('token').then((data) => (token = data));

  return (
    <ScreenStack.Navigator
      screenOptions={{ headerShown: false }}
      initialRouteName={token ? NAVIGATION_PAGES.IN_APP : NAVIGATION_PAGES.WELCOME}
    >
      <ScreenStack.Screen name={NAVIGATION_PAGES.WELCOME} component={WelcomeScreen} />
      <ScreenStack.Screen name={NAVIGATION_PAGES.LOGIN} component={LoginScreen} />
      <ScreenStack.Screen name={NAVIGATION_PAGES.REGISTER} component={JoinUsScreen} />
      <ScreenStack.Screen name={NAVIGATION_PAGES.REGISTER_ACCOUNT_DATA} component={EditAccount} />
      <ScreenStack.Screen name={NAVIGATION_PAGES.RESET_PASSWORD} component={ResetPasswordScreen} />
      <ScreenStack.Screen
        name={NAVIGATION_PAGES.RESET_PASSWORD_DEEP}
        component={ResetPasswordDeepScreen}
      />
      <ScreenStack.Screen name={NAVIGATION_PAGES.IN_APP}>
        {() => (
          <BottomTab.Navigator
            screenOptions={() => ({
              headerShown: false
            })}
          >
            <BottomTab.Screen
              options={{
                tabBarIcon: ({ color }) => <MapIcon fill={color} />
              }}
              name={NAVIGATION_PAGES.MAP_TAB}
              component={MapScreen}
            />
            <BottomTab.Screen
              options={{
                tabBarIcon: ({ color }) => <PeoplesIcon fill={color} />
              }}
              name={NAVIGATION_PAGES.TRAVELLERS_TAB}
              component={TravellersScreen}
            />
            <BottomTab.Screen
              options={{
                tabBarIcon: ({ color }) => <GlobeIcon fill={color} />
              }}
              name={NAVIGATION_PAGES.TRAVELS_TAB}
              component={TravelsScreen}
            />
            <BottomTab.Screen
              options={{
                tabBarIcon: ({ color }) => <ProfileIcon fill={color} />
              }}
              name={NAVIGATION_PAGES.PROFILE_TAB}
              component={ProfileScreen}
            />
          </BottomTab.Navigator>
        )}
      </ScreenStack.Screen>
    </ScreenStack.Navigator>
  );
};

export default Route;