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

import Home from 'vuejs/components/Pages/Home'
// const Home = () => import(
//   /* webpackMode: "lazy" */
//   /* webpackPrefetch: true */
//   /* webpackPreload: true */
//   'vuejs/components/Pages/Home')
// // import Base from 'vuejs/components/Pages/Base'
const Base = () => import(
  /* webpackChunkName: "module-base" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  'vuejs/components/Pages/Base')
// import Thematique from 'vuejs/components/Pages/Thematique'
const Thematique = () => import(
  /* webpackChunkName: "module-thematique" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  'vuejs/components/Pages/Thematique')
// import Blabla from 'vuejs/components/Pages/Blabla'
const Blabla = () => import(
  /* webpackChunkName: "module-blabla" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  'vuejs/components/Pages/Blabla')
// import Article from 'vuejs/components/Pages/Article'
const Article = () => import(
  /* webpackChunkName: "module-article" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  'vuejs/components/Pages/Article')
// import Showrooms from 'vuejs/components/Pages/Showrooms'
const Showrooms = () => import(
  /* webpackChunkName: "module-showrooms" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  'vuejs/components/Pages/Showrooms')
// import Pricing from 'vuejs/components/Pages/Pricing'
const Pricing = () => import(
  /* webpackChunkName: "module-pricing" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  'vuejs/components/Pages/Pricing')

// import Cart from 'vuejs/components/Pages/Cart'

Vue.use(VueRouter)

// https://www.lullabot.com/articles/decoupled-hard-problems-routing

// We could use aliases to never reload the page on language changement
// BUT beforeupdate is not triggered when push alias instead of path or name
// const languages = ['en', 'fr'];
// console.log('path aliases', (() => languages.map(l => `/${l}/base`))())

const basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix

const routes = [
  {
    name: 'home',
    path: basePath,
    // path: '/',
    // alias: (() => languages.map(l => `/${l}`))(),
    component: Home
    // components: {
    //   'home': Home
    // }
  },
  {
    name: 'base',
    path: `${basePath}base`,
    // path: `/base`,
    // alias: (() => languages.map(l => `/${l}/base`))(),
    component: Base
    // components: {
    //   'base': Base
    // }
  },
  {
    name: 'thematique',
    path: `${basePath}thematique/:alias`,
    component: Thematique
  },
  {
    name: 'blabla',
    path: `${basePath}blabla`,
    component: Blabla
  },
  {
    name: 'article',
    path: `${basePath}blabla/:alias`,
    component: Article
    // meta: { uuid:null }
  },
  {
    name: 'showrooms',
    path: `${basePath}showrooms`,
    component: Showrooms
    // meta: { uuid:null }
  },
  // {
  //   path: '*',
  //   name: 'notfound',
  //   components: {
  //     'notfound': NotFound
  //   }
  // },
  {
    name: 'pricing',
    path: `${basePath}pricing`,
    component: Pricing
  }
  // {
  //   name:'cart',
  //   path: `${basePath}cart`,
  //   component: Cart
  // }
]

export default new VueRouter({
  mode: 'history',
  routes: routes
})