import { createRouter, createWebHistory } from 'vue-router'
import CockpitView from '@/views/CockpitView.vue'
import LoginView from '@/views/LoginView.vue'
import { redirectToLoginIfRequired, updateLoggedIn } from '@/router/guards'
import { useAppStore } from '@/stores/app'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      component: LoginView,
      meta: {
        // no login required -> so `public === true`
        public: true,
      },
    },
    {
      path: '/',
      name: 'home',
      component: CockpitView,
    },
    {
      path: '/shop',
      component: () => import('@/views/ShopView.vue'),
    },
    {
      path: '/mediacenter',
      component: () => import('@/views/MediaView.vue'),
    },
    {
      path: '/messages',
      component: () => import('@/views/MessagesView.vue'),
    },
    {
      path: '/profile',
      component: () => import('@/views/ProfileView.vue'),
    },
    {
      path: '/learningpath/:learningPathSlug',
      component: () => import('../views/LearningPathView.vue'),
      props: true,
    },
    {
      path: '/circle/:circleSlug',
      component: () => import('../views/CircleView.vue'),
      props: true,
    },
    {
      path: '/styleguide',
      component: () => import('../views/StyelGuideView.vue'),
      meta: {
        public: true,
      },
    },
    {
      path: '/:pathMatch(.*)*',
      component: () => import('../views/404View.vue'),
    },
  ],
})

router.beforeEach(updateLoggedIn)
router.beforeEach(redirectToLoginIfRequired)

router.afterEach((to, from) => {
  const appStore = useAppStore();
  appStore.routingFinished = true;
});

export default router
