import React from 'react';
import type {
    createStackNavigator,
    StackNavigationOptions
} from '@react-navigation/stack';
import type { ParamListBase } from '@react-navigation/native';
import { ACCOUNT_SCREEN, DEBUG_SCREEN } from '../constants/screens';
import AccountScreen, {
    AccountScreenNavigationOptions
} from '../screens/AccountScreen';
import DebugScreen, {
    DebugScreenNavigationOptions
} from '../screens/DebugScreen';
import defaultNavigationOptions from './options';
import { useTheme } from '../branding';
import { stackNavigator } from './stack';

const Stack = stackNavigator() as ReturnType<
    typeof createStackNavigator<ParamListBase>
>;

const AccountStackNavigator = () => {
    const { theme } = useTheme();
    return (
        <Stack.Navigator
            initialRouteName={ACCOUNT_SCREEN}
            screenOptions={({ navigation }) =>
                defaultNavigationOptions(
                    navigation,
                    theme
                ) as unknown as StackNavigationOptions
            }
        >
            <Stack.Screen
                name={ACCOUNT_SCREEN}
                component={AccountScreen}
                options={AccountScreenNavigationOptions}
            />
            <Stack.Screen
                name={DEBUG_SCREEN}
                component={DebugScreen}
                options={DebugScreenNavigationOptions}
            />
        </Stack.Navigator>
    );
};

export default AccountStackNavigator;