import { createApp, provide, h } from 'vue'
import App from './App.vue'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { ApolloClient, InMemoryCache } from '@apollo/client/core'
import 'bootstrap'
import { store, router } from './plugins/index'
import { navigatorMixin, userIdentityMixin, errorHanlderMixin, userAuthMixin } from './mixins/index'
import { tooltip } from './utils/index'

import { setupI18n } from '@/lang'
/* import the fontawesome core */
// import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
// import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import free icons */
// import { faUser as fasUser } from '@fortawesome/free-solid-svg-icons'

/* add some pro styles */
//import { faBicycle } from '@fortawesome/pro-regular-svg-icons'
// import { faEnvelope } from '@fortawesome/pro-light-svg-icons'
// import { faFeather } from '@fortawesome/pro-thin-svg-icons'
// import {
//   faUser as fadUser,
//   faMessages as fadMessage,
//   faCircleInfo as fadCircleInfo
// } from '@fortawesome/pro-duotone-svg-icons'
// import { faAlien } from '@fortawesome/sharp-solid-svg-icons'
// import { faPlateUtensils } from '@fortawesome/sharp-regular-svg-icons'

/* add icons to the library */
// library.add(fasUser)

const cache = new InMemoryCache()

const apolloClient = new ApolloClient({
  cache,
  uri: '/graphql'
})

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
  },
  render: () => h(App)
})
app.use(store)
app.use(router)
app.use(setupI18n)
app.mixin(userIdentityMixin)
app.mixin(navigatorMixin)
app.mixin(errorHanlderMixin)
app.mixin(userAuthMixin)
app.directive('tooltip', tooltip)

import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon.vue'
app.component('svg-icon', SvgIcon)

app.mount('#app')
app.config.warnHandler = (msg, instance, trace) => {
  // `trace` is the component hierarchy trace
  console.log('warn:', msg, instance, trace)
}