import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import NotFound from './views/NotFound.vue';

import NewSurvey from '@/components/Rooms.vue';
import Login from '@/components/Login.vue';
import Admin from '@/components/Admin.vue';
import Profile from '@/components/Profile.vue';
import User from '@/components/User.vue';
import Test from '@/components/Test.vue';
import Group from '@/components/Group.vue';
import Permission from '@/components/Permission.vue';
import Rooms from '@/components/Rooms.vue';
import Recorders from '@/components/Recorders.vue';
import Recorder from '@/components/Recorder.vue';
import Commands from '@/components/Commands.vue';
import store from '@/store';


Vue.use(Router);

export const router = new Router({
// export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
        },
        {
            path: '/login',
            name: 'login',
            component: Login,
        },
        {
            path: '/admin',
            name: 'admin',
            component: Admin,
            children: [
                {
                    name: 'admin.user',
                    path: 'user',
                    component: User,
                },
                {
                    name: 'admin.group',
                    path: 'group',
                    component: Group,
                },
                {
                    name: 'admin.permission',
                    path: 'permission',
                    component: Permission,
                },
            ],
        },
        {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
        }, {
            path: '/surveys/:id',
            name: 'Survey',
            component: Rooms,
        }, {
            path: '/rooms',
            name: 'rooms',
            component: Rooms,
        }, {
            path: '/recorders',
            name: 'recorders',
            component: Recorders,
        }, {
            path: '/recorder/:recorder_id?',
            name: 'recorder',
            props: true,
            component: Recorder,
        }, {
            path: '/test',
            name: 'test',
            component: Test,
        }, {
            path: '/commands',
            name: 'commands',
            component: Commands,
        }, {
            path: '/surveys',
            name: 'NewSurvey',
            component: NewSurvey,
            beforeEnter(to, from, next) {
                if (!store.getters.isAuthenticated) {
                    next('/login');
                } else {
                    next();
                }
            },
        }, {
            path: '/profile',
            name: 'profile',
            component: Profile,
            beforeEnter(to, from, next) {
                if (!store.getters.isAuthenticated) {
                    if (store.getters.isRefreshTokenValid) {
                        store.dispatch('refreshToken')
                            .then(() => next())
                            .catch(() => next('/login'));
                    } else {
                        next('/login');
                    }
                } else {
                    next();
                }
            },
        },
        {
            path: '*',
            name: 'notFound',
            component: NotFound,
        },
    ],
});

export default router;
