import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginView from '../views/LoginView.vue'
import RegisterView from '../views/RegisterView.vue'
import RoomNavView from '../views/RoomNavView.vue'
import BuildingsView from '../views/BuildingsView.vue'
import ChartView from '../views/ChartView.vue'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'home',
            component: HomeView,
        },
        {
            path: '/login',
            name: 'login',
            component: LoginView,
        },
        {
            path: '/register',
            name: 'register',
            component: RegisterView,
        },
        {
            path: '/roomNav',
            name: 'roomNav',
            component: RoomNavView,
        },
        {
            path: '/buildingsView',
            name: 'buildingsView',
            component: BuildingsView,
        },
        {
            path: '/charts',
            name: 'charts',
            component: ChartView
        },
        {
            path: '/rooms/:room',
            name: 'RoomChart',
            component: () => import('../views/ChartView.vue'),
            props: true
        },        
        {
            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('../views/AboutView.vue'),
        },
    ],
})

export default router