import { Vuetify } from 'vuetify';

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';

import VueApollo from 'vue-apollo';

import Vue from 'vue';

import App from './modules/app/App';
import router from './router';

import './shared/stylus/main.styl';

import { i18n } from './i18n/';

import { CAPITALIZE, ABBREVIATE, UPPERCASE } from './shared/filters';

import { VUETIFY_COMPONENTS, VUETIFY_STYLE } from './config/vuetify-config';

Vue.use(Vuetify, {
  components: VUETIFY_COMPONENTS,
  theme: VUETIFY_STYLE,
});

Vue.config.productionTip = false;

// Filter Definitions
Vue.filter(CAPITALIZE.name, CAPITALIZE.handler);
Vue.filter(ABBREVIATE.name, ABBREVIATE.handler);
Vue.filter(UPPERCASE.name, UPPERCASE.handler);

const GRAPHQL_ENDPOINT = document.domain === 'chatsphere.de' ?
  'wss://api.chatsphere.de/graphql' : 'ws://localhost:3000/graphql';

const client = new SubscriptionClient(GRAPHQL_ENDPOINT, {
  reconnect: true,
}, WebSocket);

let link = new WebSocketLink(client);

// Hard coded: Be able to use HTTP for local testing purposes
if (document.domain !== 'chatsphere.de') {
  const httpLink = new HttpLink({
    uri: 'http://localhost:3000/graphql',
  });

  link = split(
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query);
      return kind === 'OperationDefinition' && operation === 'subscription';
    },
    link,
    httpLink,
  );
}


// Create the apollo client
const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  connectToDevTools: true,
});

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

// Install the vue plugin
Vue.use(VueApollo);

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