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'
import i18n from './i18n'
import VueMeta from 'vue-meta'
 



Vue.config.productionTip = false
Vue.use(Vuex)
Vue.use(VueRouter)

Vue.use(VueMeta, {
  // optional pluginOptions
  refreshOnceOnNavigation: true
})

Vue.use(VuePlausible, {
  domain: 'beta.ordbok.uib.no'
})

Vue.$plausible.enableAutoPageviews()

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: [
                {
                  path: 'search',
                  name: 'search'
                },
                {
                  name: 'lookup',
                  path: ':id(\\d+)/:lemma?'
                },
                {
                  name: "short",
                  path: ':query',
                  redirect: to => {
                    return  {path: 'search', query: {q: to.params.query, scope: 'e'}}
                  }
                }
              ]
            },
            {
              path: 'bob/*',
              redirect: to => {
                return "bm/" + to.params.pathMatch
              }
            },
            {
              path: 'nob/*',
              redirect: to => {
                return "nn/" + to.params.pathMatch
              }
            },
            {
              path: 'bob,nob/*',
              redirect: to => {
                return "bm,nn/" + to.params.pathMatch
              }
            }
          ]
        }
      ]
    }
  ]
})

// All interaction with local storage is encapsulated in vuex
const store = new Vuex.Store({
  strict: true,
  state: {
    showSearchToolbar: null,
    showInflectionNo: null,
    currentLocale: 'nno',
    collapseArticles: 'auto',
    defaultDict: null,
    perPage: 20,
    menuOpen: false,
    noMouse: null,
    searchRoute: null,
    fulltextHighlight: false,
    unavailable: null
  },
  mutations: {
    initStore(state) {
      try {
      state.showSearchToolbar = localStorage.getItem('showSearchToolbar') || false
      state.showInflectionNo = localStorage.getItem('showInflectionNo') || false
      state.currentLocale = localStorage.getItem('currentLocale') || null
      state.defaultDict = localStorage.getItem('defaultDict') || 'bm,nn'
      state.perPage = localStorage.getItem('perPage') || 20
      state.collapseArticles = localStorage.getItem('collapseArticles') || 'auto'
      } catch(e) {
        console.log("localStorage unavailable")
        state.unavailable = true
      }
      state.noMouse = navigator.userAgentData? navigator.userAgentData.mobile : !window.matchMedia('(pointer: fine)').matches

      if (state.currentLocale) {
        i18n.locale = state.currentLocale
      }
    },
    setLocale(state, payload) {
      Vue.$plausible.trackEvent("set locale", {props: {from: state.currentLocale, to: payload.locale}})
      state.currentLocale = payload.value
      i18n.locale = payload.value
      if (!state.unavailable) localStorage.setItem("currentLocale", payload.value);
    },
    setCollapse(state, value) {
      Vue.$plausible.trackEvent("set collapse", {props: {from: state.collapseArticles, to: value}})
      if (!state.unavailable) localStorage.setItem("collapseArticles", value)
      state.collapseArticles = value
    },
    setFulltextHighlight(state, value) {
      state.fulltextHighlight = value
    },
    setPerPage(state, value) {
      if (!state.unavailable) localStorage.setItem("perPage", value)
      state.perPage = value
    },
    toggleInflectionNo(state) {
      Vue.$plausible.trackEvent("toggle inflection number", {props: {from: state.showInflectionNo, to: !state.showInflectionNo}})
      state.showInflectionNo = !state.showInflectionNo
      if (!state.unavailable) localStorage.setItem('showInflectionNo', state.showInflectionNo);
    },
    toggleMenu(state) {
      state.menuOpen = !state.menuOpen
    },
    setDefaultDict(state, value) {
      Vue.$plausible.trackEvent("set default dict", {props: {from: state.defaultDict, to: value}})
      if (!state.unavailable) localStorage.setItem("defaultDict", value)
      state.defaultDict = value
    },
    resetStore() {
      Vue.$plausible.trackEvent("reset store")
      localStorage.removeItem("showSearchToolbar")
      localStorage.removeItem("showInflectionNo")
      localStorage.removeItem("currentLocale")
      localStorage.removeItem("collapseArticles")
      localStorage.removeItem("defaultDict")
      this.commit("initStore")
    },
    setSearchRoute(state, path) {
      state.searchRoute = path
    }
  }
})

new Vue({
  router,
  vuetify,
  store,

  beforeCreate() {
		this.$store.commit('initStore');
	},

  i18n,
  render: h => h(Root )
}).$mount('#app')