import {
	DarkTheme,
	DefaultTheme,
	NavigationContainer,
} from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { useColorScheme } from "react-native";

import Login from "../screens/login";
import Tabs from "./tab-navigator";
import AsyncStorage from "@react-native-async-storage/async-storage";

const Stack = createNativeStackNavigator();

const ScreensStack = () => (
	<Stack.Navigator>
		<Stack.Screen
			name="Tabs"
			component={Tabs}
			options={{ headerShown: false }}
		/>
	</Stack.Navigator>
);
/**
 * Functional component for app navigation. Configures a navigation container with a stack navigator.
 * Dynamically selects between dark and light themes based on the device's color scheme.
 * The stack navigator is configured to manage various app screens.
 *
 * @returns {React.ComponentType} A NavigationContainer wrapping a Stack.Navigator for app screens.
 */
export default function AppNavigator(): React.JSX.Element {
	// useColorScheme get's the theme from device settings
	const scheme = useColorScheme();
	const getToken = async () => {
		const token = await AsyncStorage.getItem('token')
		console.log('token', token)
		return token
	}
	

	return (
		<NavigationContainer theme={scheme === "dark" ? DarkTheme : DefaultTheme}>
			<Stack.Navigator screenOptions={{ headerShown: false }}>
				{getToken ? (
					<Stack.Screen name="App" component={ScreensStack} />
				) : (
					<Stack.Screen
						name="Login"
						component={Login}
						options={{ headerShown: false }}
					/>
				)}
				
				
			</Stack.Navigator>
		</NavigationContainer>
	);
}