import React, { useContext } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthProvider, AuthContext } from './src/context/AuthContext';
import { LocationProvider } from './src/context/LocationProvider';

import LoginScreen from './src/screen/LoginScreen';
import SelectionScreen from './src/screen/SelectionScreen';
import CameraScreen from './src/screen/CameraScreen';
import GpsScreen from './src/screen/GpsScreen';
import AnalysisScreen from './src/screen/AnalysisScreen';
import AgreementScreen from './src/screen/AgreementScreen';
import History from './src/screen/History';

const AuthStack = createStackNavigator();
const AppStack = createStackNavigator();

const AuthNavigator = () => (
  <AuthStack.Navigator>
    <AuthStack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
    <AuthStack.Screen name="Agreement" component={AgreementScreen} options={{ title: '회원가입' }} />
  </AuthStack.Navigator>
);

const MainNavigator = () => (
  <AppStack.Navigator>
    <AppStack.Screen name="Selection" component={SelectionScreen} options={{ title: '운행 선택' }} />
    <AppStack.Screen name="Camera" component={CameraScreen} options={{ title: '카메라 분석' }} />
    <AppStack.Screen name="Gps" component={GpsScreen} options={{ title: '운행' }} />
    <AppStack.Screen name="Analysis" component={AnalysisScreen} options={{ title: '분석결과' }} />
    <AppStack.Screen name="History" component={History} options={{ title: '히스토리' }} />
  </AppStack.Navigator>
);

const AppContent = () => {
  const { isLoggedIn, loading } = useContext(AuthContext);

  if (loading) {
    return null;
  }

  return (
    <NavigationContainer>
      {isLoggedIn ? <MainNavigator /> : <AuthNavigator />}
    </NavigationContainer>
  );
};

export default () => (
  <LocationProvider>
    <AuthProvider>
      <AppContent />
    </AuthProvider>
  </LocationProvider>
);