import React, { useState, useEffect } from "react";
import { StyleSheet } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Provider as PaperProvider } from "react-native-paper";

import { DefaultTheme } from "react-native-paper";
import AppNav from "./routes/app/appNav";
import Settings from "./routes/settings/Settings";
import Welcome from "./routes/startup/Welcome";
import {
  RouteProvider,
  RouteContext,
} from "./routes/app/context/routes/RouteContext";

const Stack = createStackNavigator();

export default function App() {
  const [viewed, setViewed] = useState(false);
  const checkWelcomeViewed = async () => {
    try {
      let view = await AsyncStorage.getItem("welcomeViewed");
      setViewed(JSON.parse(view));
    } catch (e) {
      alert(e);
    }
  };

  useEffect(() => {
    checkWelcomeViewed();
  }, []);

  const theme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      primary: "#2667ff",
      background: "#ccdbfd",
      secondary: "#e9ecef",
      secondaryDarker: "#ced4da",
      secondaryAccent: "#adb5bd",
      dark: "#03045e",
      light: "#edf2fb",
      yellow: "#ffd400",
      yellowAccent: "#fff6cc",
      red: "#dd2c2f",
      redAccent: "#f6cacc",
    },
  };

  return (
    <PaperProvider theme={theme}>
      <RouteProvider>
        <SafeAreaProvider>
          <NavigationContainer style={styles.container}>
            <Stack.Navigator initialRouteName={viewed ? "App" : "Welcome"}>
              <Stack.Screen
                name="Welcome"
                component={Welcome}
                options={{ headerShown: false }}
              />
              <Stack.Screen
                name="App"
                component={AppNav}
                options={{ headerShown: false }}
              />
              <Stack.Screen
                name="Settings"
                component={Settings}
                options={{ headerShown: false }}
              />
            </Stack.Navigator>
          </NavigationContainer>
        </SafeAreaProvider>
      </RouteProvider>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});