import { createWebHistory, RouteRecordRaw } from 'vue-router';
import Dashboard from '../views/Dashboard.vue';
import Login from '../views/Login.vue';
import HousePlanner from '../views/HousePlanner.vue';
import BuildingViewBase from '../views/building/BuildingViewBase.vue';
import BuildingView from '../views/building/BuildingView.vue';
import FloorView from '../views/building/floors/FloorView.vue';
import { createRouter } from 'vue-router';
import { useUserStore } from '../store/user.store';
import Demo from '../views/Demo.vue';

const routes: RouteRecordRaw[] = [
  {
    name: 'dashboard',
    path: '/',
    component: Dashboard,
  },
  {
    name: 'login',
    path: '/login',
    component: Login,
  },
  {
    name: 'planner',
    path: '/planner',
    component: HousePlanner,
  },
  {
    name: 'demo',
    path: '/demo',
    component: Demo,
  },
  {
    name: 'buildings',
    path: '/building/:id',
    component: BuildingViewBase,
    children: [
      {
        name: 'building',
        path: '',
        meta: {
          breadcrumbs: [
            {
              name: 'buildings',
              title: 'Building',
              props: ['id'],
            },
          ],
        },
        component: BuildingView,
      },
      {
        name: 'floor',
        path: 'floor/:number',
        component: FloorView,
        meta: {
          breadcrumbs: [
            {
              name: 'buildings',
              title: 'Building',
              props: ['id'],
            },
            {
              name: 'floor',
              title: 'Floor',
              props: ['id', 'number'],
            },
          ],
        },
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore();

  if (
    to.name !== 'login' &&
    to.meta?.authenticated !== false &&
    !userStore.isLoggedIn
  ) {
    return next({ name: 'login' });
  }

  next();
});

export default router;