// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import FastClick from 'fastclick'
import App from './App'

import { sync } from 'vuex-router-sync'

Vue.use(VueRouter)
Vue.use(Vuex)

import vuexI18n from 'vuex-i18n'

const Home = () => import('./components/Home.vue')
const Lights = () => import('./components/Lights.vue')
const Sprinklers = () => import('./components/Sprinklers.vue')
const Shutters = () => import('./components/Shutters.vue')
const Timers = () => import('./components/Timers.vue')

const Settings = () => import('./components/Settings.vue')

const routes = [
  // Root Level - Home Tab
  { path: '/', component: Home },
  // Root Level - Lights Tab
  { path: '/lights', component: Lights },
  // Root Level - Sprinkler Tab
  { path: '/sprinklers', component: Sprinklers },
  // Root Level - Shutter Tab
  { path: '/shutters', component: Shutters },
  // Root Level - Timers Tab
  { path: '/timers', component: Timers },
  // Root Level - Settings Tab
  { path: '/settings/', component: Settings }
]

let store = new Vuex.Store({
  modules: {
    i18n: vuexI18n.store
  }
})

store.registerModule('vux', {
  state: {
    demoScrollTop: 0,
    isLoading: false,
    direction: 'forward'
  },
  mutations: {
    updateDemoPosition (state, payload) {
      state.demoScrollTop = payload.top
    },
    updateLoadingStatus (state, payload) {
      state.isLoading = payload.isLoading
    },
    updateDirection (state, payload) {
      state.direction = payload.direction
    }
  },
  actions: {
    updateDemoPosition ({commit}, top) {
      commit({type: 'updateDemoPosition', top: top})
    }
  }
})

Vue.use(vuexI18n.plugin, store)

// plugins
import { LocalePlugin, LoadingPlugin } from 'vux'

Vue.use(LocalePlugin)
Vue.use(LoadingPlugin)

const router = new VueRouter({
  routes
})

FastClick.attach(document.body)

// enable the vue devtools
Vue.config.devtools = true

Vue.config.productionTip = false

Vue.i18n.set('en')
Vue.i18n.fallback('en')
sync(store, router)

// simple history management
const history = window.sessionStorage
history.clear()
let historyCount = history.getItem('count') * 1 || 0
history.setItem('/', 0)

router.beforeEach(function (to, from, next) {
  store.commit('updateLoadingStatus', {isLoading: true})
  // console.log(to)
  // console.log(from)
  const toIndex = history.getItem(to.path)
  const fromIndex = history.getItem(from.path)

  if (toIndex) {
    if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
      store.commit('updateDirection', {direction: 'forward'})
    } else {
      store.commit('updateDirection', {direction: 'reverse'})
    }
  } else {
    ++historyCount
    history.setItem('count', historyCount)
    to.path !== '/' && history.setItem(to.path, historyCount)
    store.commit('updateDirection', {direction: 'forward'})
  }

  if (/\/http/.test(to.path)) {
    let url = to.path.split('http')[1]
    window.location.href = `http${url}`
  } else {
    next()
  }
})

router.afterEach(function (to) {
  store.commit('updateLoadingStatus', {isLoading: false})
})

/* eslint-disable no-new */
new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app-box')
