import OurVue, { VueConstructor } from 'vue'
import { VuetifyUseOptions } from '@itools-front/ifrontui/types'
import { consoleError } from './util/console'

export function install (Vue: VueConstructor, args: VuetifyUseOptions = {}) {
  if ((install as any).installed) return
  (install as any).installed = true

  if (OurVue !== Vue) {
    consoleError(`Multiple instances of Vue detected
See https://github.com/vuetifyjs/vuetify/issues/4068

If you're seeing "$attrs is readonly", it's caused by this`)
  }

  const components = args.components || {}
  const directives = args.directives || {}

  for (const name in directives) {
    const directive = directives[name]

    Vue.directive(name, directive)
  }

  (function registerComponents (components: any) {
    if (components) {
      for (const key in components) {
        const component = components[key]
        if (component && !registerComponents(component.$_ifrontui_subcomponents)) {
          Vue.component(key, component as typeof Vue)
        }
      }
      return true
    }
    return false
  })(components)

  // Used to avoid multiple mixins being setup
  // when in dev mode and hot module reload
  // https://github.com/vuejs/vue/issues/5089#issuecomment-284260111
  if (Vue.$_vuetify_installed) return
  Vue.$_vuetify_installed = true

  Vue.mixin({
    beforeCreate () {
      const options = this.$options as any

      if (options.ifrontui) {
        options.ifrontui.init(this, this.$ssrContext)
        this.$ifrontui = Vue.observable(options.ifrontui.framework)
      } else {
        this.$ifrontui = (options.parent && options.parent.$ifrontui) || this
      }
    },
    beforeMount () {
      // @ts-ignore
      if (this.$options.ifrontui && this.$el && this.$el.hasAttribute('data-server-rendered')) {
        // @ts-ignore
        this.$ifrontui.isHydrating = true
        // @ts-ignore
        this.$ifrontui.breakpoint.update(true)
      }
    },
    mounted () {
      // @ts-ignore
      if (this.$options.ifrontui && this.$ifrontui.isHydrating) {
        // @ts-ignore
        this.$ifrontui.isHydrating = false
        // @ts-ignore
        this.$ifrontui.breakpoint.update()
      }
    },
  })
}