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

import Tabs from './tab-navigator';
import Login from '../screens/login';

const Stack = createNativeStackNavigator()

const ScreensStack = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Tabs"
      component={Tabs}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="Login"
      component={Login}
      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();

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