import { App, Plugin, Ref, ref } from 'vue'

export interface NotificationOptions {
  color?: string
  iconLeft: string
  iconTop?: string
  title?: string
  text?: string
  buttons?: string
  delay?: number
  position?: string
  elevation?: string
  subTitle?: string
}

export class NotificationQueue {
  private queue: NotificationOptions[] = []
  public isActive = ref(false)
  public currentNotification = ref<NotificationOptions | null>(null)

  enqueue(notification: NotificationOptions) {
    this.queue.push(notification)
    if (!this.isActive.value) {
      this.showNext()
    }
  }

  showNext() {
    const notification = this.queue.shift()
    if (notification) {
      this.isActive.value = true
      this.currentNotification.value = notification
    }
  }

  closeNotification() {
    this.isActive.value = false
    this.currentNotification.value = null
    setTimeout(() => {
      this.showNext()
    }, 300)
  }
}

export interface NotificationInstance {
  isActive: Ref<boolean>
  currentNotification: Ref<NotificationOptions | null>
  run: (notification: NotificationOptions) => void
  close: () => void
}

export const notificationQueue = new NotificationQueue()

export const useNotification = (): NotificationInstance => {
  return {
    isActive: notificationQueue.isActive,
    currentNotification: notificationQueue.currentNotification,
    run: (notification: NotificationOptions) => {
      notificationQueue.enqueue(notification)
    },
    close: () => {
      notificationQueue.closeNotification()
    },
  }
}

export const Notification: Plugin = {
  install: (app: App) => {
    app.config.globalProperties.$useNotification = useNotification()
    app.provide('$useNotification', useNotification())
  },
}