import 'babel-polyfill'
import FastClick from 'fastClick'
import Vue from 'vue'
import App from './components/App.vue'
import Trackly from './plugins/trackly'
import Routemanager from './plugins/routemanager'
import store from './store'
import router from './routes'
import detectPrivateMode from './lib/PrivateModeDetection'
import updateAppConfig from './lib/UpdateAppConfig'
import './filters'
import 'moment/locale/en-gb'
import 'moment/locale/sv'
import 'moment/locale/da'
import 'moment/locale/de'
import 'moment/locale/nb'
import MQ from 'vue-match-media'
import VueConstants from 'vue-constants'

Trackly.gaPageView(router)
Vue.use(Trackly)
Vue.use(Routemanager)
Vue.use(MQ)
Vue.use(VueConstants)

router.beforeEach((to, from, next) => {
  document.body.scrollTop = document.documentElement.scrollTop = 0
  next()
})

// Disable double tap to zoom
window.addEventListener('load', function () {
  FastClick.attach(document.body)
}, false)

window.addEventListener('DOMContentLoaded', () => {
  // Use array foreach if no native NodeList foreach support
  if (!NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach
  }
  // Detect private mode
  // @TODO: Handle this better once vuex-persistedstate has replaced persist!
  detectPrivateMode().then((result) => {
    store.dispatch('setPrivateMode', result)
  })

  // Create Vue instance
  new Vue({
    store,
    router,
    render: h => h(App),
    methods: {
      computedImage (derivative, parentImageUrl) {
        return parentImageUrl + '_gen/derivatives/' +
        derivative + '/' + parentImageUrl.split(/\//).pop()
      }
    },
    mq: {
      // hero image derivatives
      heroImgb435h290: '(max-width: 435px)',
      heroImgb450h150: '(min-width: 436px) and (max-width: 450px)',
      heroImgb460h230: '(min-width: 451px) and (max-width: 460px)',
      heroImgb580h290: '(min-width: 461px) and (max-width: 580px)',
      heroImgb600h150: '(min-width: 581px) and (max-width: 600px)',
      heroImgb690h230: '(min-width: 601px) and (max-width: 690px)',
      heroImgb750h150: '(min-width: 691px) and (max-width: 750px)',
      heroImgb870h290: '(min-width: 751px) and (max-width: 870px)',
      heroImgb920h230: '(min-width: 871px)',
      // product list image derivatives
      prdctListImgb410h410: '(max-width: 410px)',
      prdctListImgb615h410: '(min-width: 411px) and (max-width: 615px)',
      prdctListImgb820h410: '(min-width: 616px) and (max-width: 820px)',
      // carousel image derivatives
      carouselImgb460h460: '(max-width: 460px)',
      carouselImgb690h460: '(min-width: 461px) and (max-width: 690px)',
      carouselImgb920h460: '(min-width: 691px) and (max-width: 920px)'

    },
    beforeCreate () {
      updateAppConfig()
    }
  }).$mount('#booking-app')
})