import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import RelicsAppr from "@/views/RelicsAppr.vue"
import RelicDetail from "@/components/RelicDetail.vue"
import SwkkFadeIn from "@/views/SwkkFadeIn.vue"
import SwkkView from "@/views/SwkkView.vue"
import ObliqueView from "@/views/ObliqueView.vue"
import PanoView from "@/views/PanoView.vue"
import PanoList from "@/components/PanoList.vue"

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'HomeView',
    component: HomeView,
    beforeEnter (to, from, next) {
      const audioNode = document.getElementById('global-audio')
      audioNode.pause()
      next()
    }
  },
  {
    path: '/swkk-fade-in',
    name: 'SwkkFadeIn',
    component: SwkkFadeIn,
    meta: {
      isShowBottomBar: false,
      canFullScreen: false,
    }
  },
  {
    path: '/swkk-view',
    name: 'SwkkView',
    component: SwkkView,
    meta: {
      isShowBottomBar: true,
      canFullScreen: true,
    },
    beforeEnter (to, from, next) {
      const audioNode = document.getElementById('global-audio')
      if (audioNode.src !== require(`@/assets/audios/${globalConfig.audioName.swkkView}.mp3`)) {
        audioNode.src = require(`@/assets/audios/${globalConfig.audioName.swkkView}.mp3`)
        audioNode.play()
      }
      next()
    },
  },
  {
    path: '/oblique-view',
    name: 'ObliqueView',
    component: ObliqueView,
    meta: {
      isShowBottomBar: true,
      canFullScreen: true,
    },
    children: [
      {
        path: './pano-list',
        name: 'PanoList',
        component: PanoList,
        meta: {
          isShowBottomBar: false,
          canFullScreen: false,
        }
      },
    ],
  },
  {
    path: '/pano-view',
    name: 'PanoView',
    component: PanoView,
    meta: {
      isShowBottomBar: true,
      canFullScreen: true,
    },
    children: [
      {
        path: './pano-list',
        name: 'PanoList',
        component: PanoList,
        meta: {
          isShowBottomBar: false,
          canFullScreen: false,
        }
      },
    ],
  },
  {
    path: '/relics-appr',
    name: 'RelicsAppr',
    component: RelicsAppr,
    meta: {
      isShowBottomBar: true,
      canFullScreen: false,
    },
    children: [
      {
        path: './relic-detail',
        name: 'RelicDetail',
        component: RelicDetail,
        meta: {
          isShowBottomBar: true,
          canFullScreen: false,
        }
      },
    ],
    beforeEnter (to, from, next) {
      const audioNode = document.getElementById('global-audio')
      if (audioNode.src !== require(`@/assets/audios/${globalConfig.audioName.relicsAppr}.mp3`)) {
        audioNode.src = require(`@/assets/audios/${globalConfig.audioName.relicsAppr}.mp3`)
        audioNode.play()
      }
      next()
    },
  },
  {
    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/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router