import Vue from 'vue'
import router from './router'
import store from '../../store'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import thirdPartyCheckoutModules from './store'
import VeeValidate from 'vee-validate'
import vuexI18n from 'vuex-i18n'
import { sync } from 'vuex-router-sync'
import constants from '@/config/const'
import helpers from '@/helpers'
import { SELECTED_LANGUAGE } from '@/store/utils/localStorageKeys'
import Icon from 'vue-awesome/components/Icon'
import '@@/assets/Icon/custom-icons'
import VueScrollTo from 'vue-scrollto'
import VueSweetalert2 from 'vue-sweetalert2'
import app_settings from '@/config/app-settings'
import Vuebar from 'vuebar'
// moment
import moment from 'vue-moment'
import '../../registerServiceWorker'
import lang_en from './resources/locales/locale-en'
import lang_tw from './resources/locales/locale-tw'
import eshop_en from '@/resources/locales/ibs/locale-en.json'
import eshop_id from '@/resources/locales/ibs/locale-id.json'
import eshop_km from '@/resources/locales/ibs/locale-km.json'
import eshop_my from '@/resources/locales/ibs/locale-my.json'
import eshop_th from '@/resources/locales/ibs/locale-th.json'
import eshop_tw from '@/resources/locales/ibs/locale-tw.json'
import eshop_zh from '@/resources/locales/ibs/locale-zh.json'
import eshop_hk from '@/resources/locales/ibs/locale-hk.json'

// Vuex sync route
sync(store, router)

// Initialize Bootstrap
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

// Custom Icon
Vue.component('icon', Icon)

// Validator Plugin Initialization
const config = {
  inject: false,
}
Vue.use(VeeValidate, config)

// Translation Plugin Sync to store
Vue.use(vuexI18n.plugin, store)
let locale = localStorage.getItem(SELECTED_LANGUAGE) ? JSON.parse(localStorage.getItem(SELECTED_LANGUAGE)).key : 'en'
let langPack = {}
locale = locale.toLowerCase()
Vue.i18n.set(locale)
Vue.i18n.add('en', { ...lang_en, ...eshop_en })
Vue.i18n.add('tw', { ...lang_tw, ...eshop_tw })
Vue.i18n.add('id', { ...lang_en, ...eshop_id })
Vue.i18n.add('kh', { ...lang_en, ...eshop_km })
Vue.i18n.add('my', { ...lang_en, ...eshop_my })
Vue.i18n.add('th', { ...lang_en, ...eshop_th })
Vue.i18n.add('ch', { ...lang_en, ...eshop_zh })
Vue.i18n.add('hk', { ...lang_en, ...eshop_hk })

document.querySelector('html').setAttribute('lang', locale)
// Todo deep checking needed
// import(/* webpackChunkName: "lang-[request]" */ `./resources/locales/locale-${locale}.json`)
//   .then(async appThirdPartyLangItems => {
//     langPack = appThirdPartyLangItems.default
//     await import(/* webpackChunkName: "lang-[request]" */ `@/resources/locales/locale-${locale}.json`)
//       .then(mergeLangItems => {
//         langPack = Object.assign(langPack, mergeLangItems.default)
//       })
//       .catch(e => {
//         // eslint-disable-next-line no-console
//         console.error(e)
//       })
//     Vue.i18n.add(locale, langPack)
//   })
//   .catch(e => {
//     // eslint-disable-next-line no-console
//     console.error(e)
//   })

Vue.i18n.fallback('en')

// Register checkout specific Vuex store modules
Object.keys(thirdPartyCheckoutModules).forEach(item => {
  store.registerModule(item, thirdPartyCheckoutModules[item])
})

// Keycodes
Vue.config.keyCodes = {
  'form-submit': 13,
}

// Constant
constants.install = function() {
  Object.defineProperty(Vue.prototype, '$const', {
    get() {
      return constants
    },
  })
}
Vue.use(constants)

Vue.component('icon', Icon)

// App Settings
Vue.use({
  install: function() {
    Object.defineProperty(Vue.prototype, '$helpers', {
      get() {
        return helpers
      },
    })
  },
})

// Constant
constants.install = function() {
  Object.defineProperty(Vue.prototype, '$const', {
    get() {
      return constants
    },
  })
}

Vue.use(constants)

// Vue ScrollTo
Vue.use(VueScrollTo, {
  container: 'body',
  duration: 1000,
  easing: 'linear',
  offset: -10,
  cancelable: true,
  onStart: false,
  onDone: false,
  onCancel: false,
  x: false,
  y: true,
})

// SweetAlert
Vue.use(VueSweetalert2)

// LogRocket
// Disabled for time being
// LogRocket.init('fxdayh/ibs-member-portal', {
//   name: localStorage.getItem(LOGGED_IN_USER_NAME),
//   ibo: localStorage.getItem(LOGGED_IN_USER_IBO),
// })

// App Settings
Vue.use({
  install: function() {
    Object.defineProperty(Vue.prototype, '$appSettings', {
      get() {
        return app_settings
      },
    })
  },
})

// App Store
Vue.use({
  install: function() {
    Object.defineProperty(Vue.prototype, '$appStore', {
      get() {
        return store
      },
    })
  },
})

// Vuebar
Vue.use(Vuebar)

// Moment
Vue.use(moment)

/* eslint-disable no-new */
export function mountApp(template) {
  return new Vue({
    router,
    store,
    render: h => h(template),
  })
}
