import Vue from 'vue'
import VueRouter from 'vue-router'

import { isUserLoggedIn } from '../auth/utils'
import { haveAbility } from '../libs/acl/routeProtection'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior() {
    return { x: 0, y: 0 }
  },
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/Home.vue'),
      meta: {
        pageTitle: 'Home',
        group: 'basic',
        breadcrumb: [
          {
            text: 'Home',
            active: true,
          },
        ],
      },
    },
    {
      path: '/second-page',
      name: 'second-page',
      component: () => import('@/views/SecondPage.vue'),
      meta: {
        pageTitle: 'Second Page',
        group: 'visited',
        breadcrumb: [
          {
            text: 'Second Page',
            active: true,
          },
        ],
      },
    },
    {
      path: '/card-action',
      name: 'card-action',
      component: () => import('@/views/CardAction.vue'),
      meta: {
        pageTitle: 'Card Action',
        group: 'visited',
        breadcrumb: [
          {
            text: 'Card Action',
            active: true,
          },
        ],
      },
    },
    {
      path: '/blog/list',
      name: 'blog-list',
      component: () => import('@/views/blog/BlogList.vue'),
      meta: {
        pageTitle: 'Blog List',
        group: 'visited',
        breadcrumb: [
          {
            text: 'Pages',
          },
          {
            text: 'Blog',
          },
          {
            text: 'List',
            active: true,
          },
        ],
      },
    },
    {
      path: '/blog/:id',
      name: 'blog-detail',
      component: () => import('@/views/blog/BlogDetail.vue'),
      meta: {
        pageTitle: 'Blog Detail',
        group: 'visited',
        breadcrumb: [
          {
            text: 'Pages',
          },
          {
            text: 'Blog',
          },
          {
            text: 'Detail',
            active: true,
          },
        ],
      },
    },
    {
      path: '/blog/edit/:id',
      name: 'blog-edit',
      component: () => import('@/views/blog/BlogEdit.vue'),
      meta: {
        pageTitle: 'Blog Edit',
        group: 'visited',
        breadcrumb: [
          {
            text: 'Pages',
          },
          {
            text: 'Blog',
          },
          {
            text: 'Edit',
            active: true,
          },
        ],
      },
    },
    {
      path: '/permission',
      name: 'permission',
      component: () => import('@/views/Permission.vue'),
      meta: {
        pageTitle: '權限',
        group: 'management',
        breadcrumb: [
          {
            text: '權限',
            active: true,
          },
        ],
      },
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/Login.vue'),
      meta: {
        layout: 'full',
      },
    },
    {
      path: '/error-404',
      name: 'error-404',
      component: () => import('@/views/error/Error404.vue'),
      meta: {
        layout: 'full',
      },
    },
    {
      path: '/error-401',
      name: 'error-401',
      component: () => import('@/views/error/NotAuthorized.vue'),
      meta: {
        layout: 'full',
      },
    },
    {
      path: '*',
      redirect: 'error-404',
    },
  ],
})

router.beforeEach((to, from, next) => {
  if (to.path === '/login' || to.path === '/error-404' || to.path === '/') {
    next()
  } else if (isUserLoggedIn()) {
    if (haveAbility(to)) {
      next()
    } else {
      next({ path: '/error-401' })
    }
  } else {
    next({ path: '/login', query: { redirect: to.fullPath } })
  }
})

// ? For splash screen
// Remove afterEach hook if you are not using splash screen
router.afterEach(() => {
  // Remove initial loading
  const appLoading = document.getElementById('loading-bg')
  if (appLoading) {
    appLoading.style.display = 'none'
  }
})

export default router
