<template>
    <root>
        <app-navigator></app-navigator>
    </root>
</template>

<script>
    import { React } from 'react';

    import {
        createDrawerNavigator,
        createStackNavigator,
        createAppContainer,
    } from 'vue-native-router';

    import { Root } from 'native-base';

    import Lessons from "./screens/lessons/LessonsScreen";
    import AddLessonScreen from "./screens/lessons/AddLessonScreen";
    import Settings from "./screens/SettingsScreen";

    import Login from "./screens/auth/LoginScreen";
    import Register from "./screens/auth/RegisterScreen";

    import Greetings from "./screens/Greetings";

    import SideBar from "./components/SideBar";

    const Drawer = createDrawerNavigator(
        {
            Lessons: { screen: Lessons },
            Settings: { screen: Settings },
        },
        {
            initialRouteName: 'Lessons',
            contentOptions: {
                activeTintColor: "#3f51b5"
            },
            contentComponent: SideBar
    }
    );

    const StackNavigator = createStackNavigator(
        {
            Drawer: { screen: Drawer },
            Lessons: { screen: Lessons },
            AddLesson: { screen: AddLessonScreen },
            Settings: { screen: Settings },

            Login: { screen: Login },
            Register: { screen: Register },

            Greetings: { screen: Greetings }
        },
        {
            initialRouteName: 'Login',
            headerMode: 'none'
        }
    );

    const AppNavigator = createAppContainer(StackNavigator);

    export default {
        components: {
            Root,
            AppNavigator
        }
    }
</script>