import API from '@/api-client.js'
import Reader from './views/Reader.vue'
import Router from 'vue-router'
import SeriesList from './views/SeriesList.vue'
import VolumeList from './views/VolumeList.vue'
import Vue from 'vue'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'series-list',
      component: SeriesList,
      meta: {
        title: (to, callback) => callback('Home')
      }
    },
    {
      path: '/series/:id',
      name: 'volume-list',
      component: VolumeList,
      meta: {
        title: (to, callback) => API.getSeriesInfo(to.params.id, info => callback(info.title))
      }
    },
    {
      path: '/volume/:id',
      name: 'reader',
      component: Reader,
      meta: {
        title: (to, callback) => API.getVolumeInfo(to.params.id, info => callback(info.title))
      }
    }
  ]
})

// https://github.com/vuejs/vue-router/issues/914#issuecomment-261461921
router.beforeEach((to, from, next) => {
  to.meta.title(to, (title) => {
    document.title = `${title} – Manga Reader`
  })
  next()
})

export default router