import React, { useState } from "react";
import { NavigationContainer } from "@react-navigation/native";

import navigationTheme from "./app/navigation/navigationTheme";
import "./app/config/globals.js";
import openDatabase from "./app/database/database-connection";
import { AppLoading } from "expo";

import initDatabase from "./app/database/database-init";
import FlashMessage from "react-native-flash-message";
import AppNavigator from "./app/navigation/AppNavigator";
import EventLocationProvider from "./app/context/EventLocationContext";
import CurrentLocationProvider from "./app/context/CurrentLocationContext";
import AuthNavigator from "./app/navigation/AuthNavigator";
import { AuthContext } from "./app/auth/context";
import authStorage from "./app/auth/storage";
import MapDataProvider from "./app/context/MapDataContext";
import {getLocation} from "./app/hooks/useLocation";

export default function App() {
  const [user, setUser] = useState();
  const [isReady, setIsReady] = useState();
  
  const restoreUser = async () => {
    const user = await authStorage.getUser();
    global.location = await getLocation();
    if (user) setUser(user);
  };

  if (!isReady)
    return (
      <AppLoading startAsync={restoreUser} onFinish={() => setIsReady(true)} />
    );

  global.userDataBase = openDatabase();
  initDatabase(global.userDataBase);

  return (
    <AuthContext.Provider
      value={{
        user,
        setUser,
      }}
    >
      <CurrentLocationProvider>
        <EventLocationProvider>
            <MapDataProvider>
              <NavigationContainer theme={navigationTheme}>
                {user ? <AppNavigator /> : <AuthNavigator />}
                <FlashMessage position="top" />
              </NavigationContainer>
            </MapDataProvider>
        </EventLocationProvider>
      </CurrentLocationProvider>
    </AuthContext.Provider>
  );
}