import Vue from 'vue'

export type MessageType = 'success' | 'warning' | 'info' | 'error'

/** Message Component */
export declare class QfMessageComponent extends Vue {
  /** Close the Loading instance */
  close (): void
}

export interface CloseEventHandler {
  /**
   * Triggers when a message is being closed
   *
   * @param instance The message component that is being closed
   */
  (instance: QfMessageComponent): void
}

/** Options used in Message */
export interface QfMessageOptions {
  /** Message text */
  message: string

  /** Message type */
  type?: MessageType

  /** Display duration, millisecond. If set to 0, it will not turn off automatically */
  duration?: number

  /** Whether to show a close button */
  showClose?: boolean

  /** Whether to center the text */
  center?: boolean

  /** Callback function when closed with the message instance as the parameter */
  onClose?: CloseEventHandler
}

export interface QfMessage {
  /** Show message */
  (options: QfMessageOptions): QfMessageComponent

  /** Show a success message */
  success (text: string): QfMessageComponent

  /** Show a warning message */
  warning (text: string): QfMessageComponent

  /** Show an info message */
  info (text: string): QfMessageComponent

  /** Show an error message */
  error (text: string): QfMessageComponent
}

declare module 'vue/types/vue' {
  interface Vue {
    /** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */
    $message: QfMessage
  }
}