import { createApp } from 'vue'
import { createWebHistory, createRouter } from 'vue-router'
import {createI18n} from 'vue-i18n'
import App from './App.vue'
import { Tooltip, Popover } from 'bootstrap'
import './scss/app.scss'

import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { SchemaLink } from 'apollo-link-schema'
import { makeExecutableSchema } from '@graphql-tools/schema'
import { addMocksToSchema } from '@graphql-tools/mock'
import { DefaultApolloClient, provideApolloClient } from '@vue/apollo-composable'

const typeDefs = require('./schema.gql')

Math.random = function(){
  return 0
}

const schema = makeExecutableSchema({ typeDefs })
const schemaWithMocks = addMocksToSchema({
  schema,
  mocks: {
    Int: () => 6,
    Float: () => 22.1,
    Decimal: () => 4.22,
    String: () => 'graphql string',
    DateTime: () => '2011-01-05T17:08:49.000-0430',
    Date: () => '2011-01-05',
    Boolean: () => true,
    SuppType: () => ({
      supp_no: '[[supp_no]]'
    }),
    SuppAccntType: () => ({
      supp_accnt_no: '[[supp_accnt_no]]'
    }),
  },
  preserveResolvers: false
})

const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: new SchemaLink({ schema: schemaWithMocks }),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'network-only',
    },
  },
})

const routes = [
  {
    path: '/',
    component: { template: '<router-view></router-view>' },
    meta: { title: 'Home Page'},
    children: [
      { path: '', name: 'home', component: App, meta: { title: 'Level 1'}, children: [
        { path: '/level2', name: 'level2', component: App, meta: { title: 'Level 2'}, },
      ] },
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

const i18n = createI18n({
  locale: 'en', // set locale
  messages: {},
  fallbackWarn: false,
  missingWarn: false
})

const app = createApp(App)
app.use(router)
app.use(i18n)

app.provide(DefaultApolloClient, apolloClient)
provideApolloClient(apolloClient)

app.directive('popover', function (el, binding) {

  if(Popover.getInstance(el)) {
    Popover.getInstance(el).dispose()
  }

  if(binding.value){
    el.popover = new Popover(el,
      {
        animation: false,
        content: binding.value,
        html: true,
        placement: binding.arg,
        trigger: 'hover'
      })
  }
})

app.directive('tooltip', function (el, binding) {

  if(Tooltip.getInstance(el)){
    Tooltip.getInstance(el).dispose()
  }

  if(binding.value){
    new Tooltip(el,
      {
        animation: false,
        title: binding.value,
        placement: binding.arg,
        trigger: 'hover'
      })
  }

})


app.mount('#app')
