import Vue from 'vue'
import VueRouter from 'vue-router'
import PageErrorRoutes from '@/router/routes/page-error'
import { apolloClient } from '@/plugins/vue-apollo'
import store from '@/store'
import { GET_ME, GET_SETTING } from '@/resources/graphql'
import AuthProvider from '@/resources/axios/providers/auth'

Vue.use(VueRouter)

const routes = [
    {
    path: '/editor/:slug',
    name: 'Editor',
    component: () => import('@/views/editor/Editor.vue')
  },
  {
    path: '/sale-page/:slug',
    component: () => import('@/views/sale-page/SalePage.vue'),
    children: [
      {
        path: '',
        name: 'SalePage',
        component: () => import('@/views/sale-page/pages/home/Home.vue')
      },
      {
        path: 'products',
        name: 'SalePageProducts',
        component: () => import('@/views/sale-page/pages/products/Products.vue')
      },
      {
        path: 'products/:categoryId/:categoryName',
        name: 'SalePageCategoryProducts',
        component: () => import('@/views/sale-page/pages/products/Products.vue')
      },
      {
        path: 'products/:productId',
        name: 'SalePageProductDetail',
        component: () => import('@/views/sale-page/pages/product-detail/ProductDetail.vue')
      },
      {
        path: 'collection',
        name: 'SalePageCollection',
        component: () => import('@/views/sale-page/pages/products/Products.vue')
      },
      {
        path: 'collection/c/:categoryId/:categoryName',
        name: 'SalePageCategoryCollection',
        component: () => import('@/views/sale-page/pages/products/Products.vue')
      },
      {
        path: 'collection/:productId',
        name: 'SalePageCollectionDetail',
        component: () => import('@/views/sale-page/pages/product-detail/ProductDetail.vue')
      },
      {
        path: 'checkout',
        name: 'SalePageCheckout',
        component: () => import('@/views/sale-page/pages/checkout/Checkout.vue')
      },
      {
        path: 'payment',
        name: 'SalePagePayment',
        component: () => import('@/views/sale-page/pages/payment/Payment.vue')
      },
      {
        path: 'cart',
        name: 'SalePageCart',
        component: () => import('@/views/sale-page/pages/cart/Cart.vue')
      },
      {
        path: 'orders',
        name: 'SalePageOrders',
        component: () => import('@/views/sale-page/pages/orders/Orders.vue')
      },
      {
        path: 'orders/:orderId',
        name: 'SalePageOrder',
        component: () => import('@/views/sale-page/pages/order/Order.vue')
      },
      {
        path: 'orders/:orderId/payment',
        name: 'SalePageOrderPayment',
        component: () => import('@/views/sale-page/pages/payment/Payment.vue')
      }
    ]
  },
  PageErrorRoutes
]

const router = new VueRouter({
  mode: 'history',
  routes
})

router.beforeEach(async (to, from, next) => {
  store.dispatch('notify/setLoading', true)
  const csrf = await AuthProvider.getCsrfToken()
  store.dispatch('auth/setCsrf', csrf.token)
  const { data: { me: { id, admin } } } = await apolloClient.query({
    query: GET_ME
  }).catch(() => {
    window.location.href = process.env.VUE_APP_SHIPNITY
  })
  const { data: { setting: { name } } } = await apolloClient.query({
    query: GET_SETTING
  })
  store.dispatch('auth/setUserId', Number(id))
  store.dispatch('auth/setIsAdmin', admin)
  store.dispatch('auth/setShopName', name)
  store.dispatch('notify/setLoading', false)
  next()
})

export default router
