import Vue from 'vue'
import Root from './Root.vue'
import App from './App.vue'
import About from './components/About.vue'
import DictionaryView from './components/DictionaryView.vue'
import VueRouter from 'vue-router'
import { VuePlausible } from 'vue-plausible'
import vuetify from './plugins/vuetify'
import Vuex from 'vuex'


Vue.config.productionTip = false
Vue.use(Vuex)
Vue.use(VueRouter)
Vue.use(VuePlausible, {
  domain: 'beta.ordbok.uib.no'
})

Vue.$plausible.enableAutoPageviews()

const store = new Vuex.Store({
  strict: true,
  state: {
    showSearchToolbar: null,
    showHGNO: null,
    showInflectionNo: null,
    currentLocale: null
  },
  mutations: {
    initStore(state) {
      state.showSearchToolbar = localStorage.getItem('showSearchToolbar') || false
      state.showHGNO = localStorage.getItem('showHGNO') || false
      state.showInflectionNo = localStorage.getItem('showInflectionNo') || false
      state.currentLocale = localStorage.getItem('currentLocale') || {text:"nob", value: "nob"}
    },
    resetStore(state) {
      localStorage.removeItem("showSearchToolbar")
      localStorage.removeItem("showHGNO")
      localStorage.removeItem("showInflectionNo")
      localStorage.removeItem("currentLocale")
      this.commit("initStore", state)
    },
    changeLocale(state, locale) {
      state.currentLocale = locale
      localStorage.setItem("showSearchToolbar", locale);
    },
    toggleSearchToolbar(state) {
      let value = !state.showSearchToolbar
      state.showSearchToolbar = value
      localStorage.setItem("showSearchToolbar", value);
    }
  }
})

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {
      path: '/',
      component: App,
      children: [
        {
          path: 'om',
          name: 'about',
          component: About
        },
        {
          path: '',
          component: DictionaryView,
          children: [
            {
              path: ':lang(bm|nn|bm,nn)',
              children: [
                {
                  name: 'word',
                  path: 'w/:word/:pos?'
                },
                {
                  name: 'lookup',
                  path: ':id(\\d+)/:lemma?'
                },
                {
                  name: 'search',
                  path: 'search/:query/:pos?'
                }
              ]
            },
            {
              path: 'bob/*',
              redirect: to => {
                return "bm/" + to.params.pathMatch
              }
            },
            {
              path: 'nob/*',
              redirect: to => {
                console.log(to)
                return "nn/" + to.params.pathMatch
              }
            },
            {
              path: 'bob,nob/*',
              redirect: to => {
                return "bm,nn/" + to.params.pathMatch
              }
            }
          ]
        }
      ]
    }
  ]
})

new Vue({
  router,
  vuetify,
  store,
  beforeCreate() {
		this.$store.commit('initStore');
	},
  render: h => h(Root )
}).$mount('#app')