import 'babel-polyfill'
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueVimeoPlayer from 'vue-vimeo-player'
import apolloClient from './graphql/client'
import VueApollo from 'vue-apollo'
import App from './App'
import router from './router'
import store from '@/store/index'
import VueScrollTo from 'vue-scrollto';

Vue.config.productionTip = false;

// TODO: Move into a separate project as a plugin
//
function getRidOfEdges(collection) {
  if (typeof collection === 'object' && collection && !Array.isArray(collection)) {
    let newObj = {};
    for (const k in collection) {
      if (k === 'edges') {
        return collection.edges.map(edge => getRidOfEdges(edge.node));
      } else {
        newObj[k] = getRidOfEdges(collection[k]);
        if (newObj[k]) {
          // delete newObj[k]['__typename']
        }
      }
    }
    return newObj
  } else {
    return collection
  }
}

Object.defineProperty(Vue.prototype, '$getRidOfEdges', {value: getRidOfEdges});

Vue.use(VueApollo);
Vue.use(VueAxios, axios);
Vue.use(VueVimeoPlayer);

Vue.use(VueScrollTo, {
  duration: 500,
  easing: 'ease-out',
  offset: -50
});

// taken from https://stackoverflow.com/questions/36170425/detect-click-outside-element
Vue.directive('click-outside', {
  bind(el, binding, vnode) {
    el.clickOutsideEvent = event => {
      if (!(el === event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent);
  },
  unbind(el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  }
});

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  provide: apolloProvider.provide(),
  render: h => h(App)
});