import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {useNavigation} from '@react-navigation/native';

import SendLocation from './src/screens/SendLocation.tsx';
import CameraScreen from './src/screens/CameraScreen.tsx';
import LoginScreen from './src/screens/LoginScreen.tsx';
import AgreementScreen from './src/screens/AgreementScreen.tsx';

import AnalysisScreen from './src/screens/AnalysisScreen.tsx';

import {verifyTokens} from './src/utils/loginUtils.ts';
import {RootStackParam} from './src/utils/RootStackParam.ts';

const Stack = createNativeStackNavigator<RootStackParam>();

const RootNavigator = () => {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParam>>();

  React.useEffect(() => {
    const checkTokens = async () => {
      await verifyTokens(navigation);
    };
    checkTokens();
  }, [navigation]);

  return (
    <Stack.Navigator
      initialRouteName="LoginScreen"
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name="SendLocation" component={SendLocation} />
      <Stack.Screen
        name="CameraScreen"
        component={CameraScreen}
        options={{
          headerShown: true,
          headerTransparent: true,
          headerTintColor: '#ffffff',
          title: '',
          headerStyle: {
            backgroundColor: 'rgba(255, 255, 255, 0.3)',
          },
        }}
      />
      <Stack.Screen name="LoginScreen" component={LoginScreen} />
      <Stack.Screen
        name="AgreementScreen"
        component={AgreementScreen}
        options={{
          headerShown: true,
          headerTransparent: true,
          headerTintColor: '#cccccc',
          title: '',
          headerStyle: {
            backgroundColor: 'rgba(255, 255, 255, 0.3)',
          },
        }}
      />
      <Stack.Screen
        name="AnalysisScreen"
        component={AnalysisScreen}
        options={{
          headerShown: true,
          headerTintColor: '#424242',
          title: '운행 히스토리',
        }}
      />
    </Stack.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  );
}