import Vue from 'vue'
import msgboxView from './message-box.vue'

const defaults = {
  title: '',
  tips: '',
  message: '',
  className: '',
  type: 'dialog',
  messageAlign: 'center',
  cancelButtonText: '取消',
  confirmButtonText: '确定',
  cancelButtonColor: '',
  confirmButtonColor: '#508cee',
  showCancel: true,
  showConfirm: true,
  lockScroll: true,
  closeOnClickOverlay: false,
}

const MessageBoxConstructor = Vue.extend(msgboxView)

let currentMsg
let instance
let msgQueue = []

/* eslint-disable no-use-before-define */
const defaultCallback = action => {
  if (currentMsg) {
    const { callback } = currentMsg
    if (typeof callback === 'function') {
      callback(action)
    }
    if (currentMsg.resolve) {
      const { type } = currentMsg.options
      if (type === 'dialog') {
        currentMsg[action === 'confirm' ? 'resolve' : 'reject'](action)
      } else {
        currentMsg.resolve(action)
      }
    }
    MessageBox.close()
  }
}

const initInstance = () => {
  instance = new MessageBoxConstructor({
    el: document.createElement('div'),
  })
  instance.$on('input', value => {
    instance.value = value
  })
  instance.callback = defaultCallback
}

// 显示消息队列里的第一个消息
const showNextMsg = () => {
  if (!instance) {
    initInstance()
  }
  if (!instance.value) {
    if (msgQueue.length > 0) {
      currentMsg = msgQueue.shift()
      const { options } = currentMsg
      instance = Object.assign(instance, options)
      if (options.callback === undefined) {
        instance.callback = defaultCallback
      }
      document.body.appendChild(instance.$el)
      instance.value = true
    }
  }
}

/* eslint-disable no-param-reassign */
/* eslint-disable prefer-rest-params */
/* eslint-disable prefer-destructuring */
const MessageBox = (options, callback) => {
  if (typeof options === 'string') {
    options = {
      message: options,
    }
  }
  if (options.callback && !callback) {
    callback = options.callback
  }
  if (typeof Promise !== 'undefined') {
    return new Promise((resolve, reject) => {
      // eslint-disable-line
      msgQueue.push({
        options: Object.assign(
          {},
          defaults,
          MessageBox.defaults || {},
          options,
        ),
        callback,
        resolve,
        reject,
      })
      showNextMsg()
    })
  }
  msgQueue.push({
    options: Object.assign({}, defaults, MessageBox.defaults || {}, options),
    callback,
  })
  showNextMsg()
  return instance
}

MessageBox.setDefaults = newDefaults => {
  MessageBox.defaults = newDefaults
}

MessageBox.alert = (message, title, tips, options) => {
  if (typeof message === 'object') {
    options = message
    message = ''
  }
  if (typeof title === 'object') {
    options = title
    title = ''
  }
  if (typeof tips === 'object') {
    options = tips
    tips = ''
  }
  return MessageBox(
    Object.assign(
      {
        title,
        message,
        tips,
        type: 'alert',
        showCancel: true,
        showConfirm: false,
        cancelButtonText: '知道了',
      },
      options,
    ),
  )
}

MessageBox.dialog = (message, title, tips, options) => {
  if (typeof message === 'object') {
    options = message
    message = ''
  }
  if (typeof title === 'object') {
    options = title
    title = ''
  }
  if (typeof tips === 'object') {
    options = tips
    tips = ''
  }
  return MessageBox(
    Object.assign(
      {
        title,
        message,
        tips,
        type: 'dialog',
        showCancel: true,
        showConfirm: true,
      },
      options,
    ),
  )
}

MessageBox.close = () => {
  if (!instance) return
  instance.value = false
  msgQueue = []
  currentMsg = null
}
MessageBox.install = vueGlobal => {
  vueGlobal.use(msgboxView)
  vueGlobal.prototype.$messagebox = MessageBox
}
export default MessageBox
