import Vue from 'vue'
import VueBus from 'vue-bus'
import VueCurrencyFilter from 'vue-currency-filter'
import VueScrollTo from 'vue-scrollto'
import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min'
import 'vue-slider-component/dist-css/vue-slider-component.css'
import 'vue-slider-component/theme/default.css'
import PortalVue from 'portal-vue'
import LineClamp from 'vue-line-clamp'
import ChDrawer from 'ch-drawer'
import VueLazyload from 'vue-lazyload'
import { mapState } from 'vuex'

// import styles for ui-components
import '@mezereon/ui-components-vue/dist/ui-components-vue.css'
import '@/style/index.scss'

import Axios from '@/plugins/axios.js'
import '@/plugins/QueryState.js'
import Store from '@/plugins/store.js'
import Cookies from '@/plugins/cookies.js'
import Translation from '@/plugins/translation.js'
import '@/plugins/filters.js'
import '@/plugins/v-tooltip.js'
import Search from '@/mixins/search.js'
import Autocomplete from '@/mixins/autocomplete.js'

import MzSearchBox from './custom/MzSearchBox.vue'
import MzAutocomplete from './custom/MzAutocomplete.vue'

window.mz = window.mz || {}

Vue.use(VueCurrencyFilter, {
  symbol: '$',
  thousandsSeparator: ',',
  fractionCount: 2,
  fractionSeparator: '.',
  symbolPosition: 'front',
  symbolSpacing: false
})
Vue.use(VueScrollTo)
Vue.use(VueBus)
Vue.use(Axios)
Vue.use(Store)
Vue.use(Cookies)
Vue.use(Translation)
Vue.use(PortalVue)
Vue.component('VueSlider', VueSlider)
Vue.use(LineClamp)
Vue.config.productionTip = false
Vue.use(ChDrawer, { zIndex: 99999 })
Vue.use(VueLazyload)

// import custom content
import HitListItem from '@/custom/HitListItem.vue'
import HitGridItem from '@/custom/HitGridItem.vue'
import MzContext from '@/custom/MzContext.js'
import '@/custom/style.scss'

import {
  MzActionBar,
  MzHitsInfo,
  MzBanner,
  MzList,
  MzTree,
  MzHitsGrid,
  MzHitsList,
  MzPagination,
  MzSlider,
  MzRefinements,
  MzSelections
} from '@mezereon/ui-components-vue'

if (document.getElementById('mz-autocomplete')) {
  window.mz.suggest = new Vue({
    components: {
      MzAutocomplete
    },
    mixins: [Autocomplete]
  }).$mount('#mz-autocomplete')
}

if (document.getElementById('mz-app')) {
  window.mz.app = new Vue({
    components: {
      'mz-search-box': MzSearchBox,
      HitListItem,
      HitGridItem,
      MzContext,
      MzActionBar,
      MzHitsInfo,
      MzBanner,
      MzList,
      MzTree,
      MzHitsGrid,
      MzHitsList,
      MzPagination,
      MzSlider,
      'mz-refinments': MzRefinements,
      MzRefinements,
      MzSelections
    },
    mixins: [Search],
    data() {
      return {
        portalNav: false
      }
    },
    computed: {
      filterLayoutClass() {
        return `mz-filter-layout-${this.filterLayout}`
      },
      ...mapState('search', ['filterLayout'])
    },
    methods: {
      togglePortalNav(show) {
        this.portalNav = show
      }
    }
  }).$mount('#mz-app')
}

import Recommendations from './Recommendations.vue'

// create mz-recs dynamically
if (!document.getElementById('mz-recs')) {
  var mzRecs = document.createElement('div')
  mzRecs.id = 'mz-recs'
  document.body.insertBefore(mzRecs, document.body.firstChild)
}

if (document.getElementById('mz-recs')) {
  new Vue({
    render: h => h(Recommendations)
  }).$mount('#mz-recs')
}

window.mz.enabled = true
