import Vue, { VNode } from 'vue'
import { MessageType } from './message'

export type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

/** Notification Component */
export declare class ElNotificationComponent extends Vue {
  /** Close the Notification instance */
  close (): void
}

export interface ElNotificationOptions {
  /** Title */
  title: string

  /** Description text */
  message: string | VNode

  /** Notification type */
  type?: MessageType

  /** Custom icon's class. It will be overridden by type */
  iconClass?: string

  /** Custom class name for Notification */
  customClass?: string

  /** Duration before close. It will not automatically close if set 0 */
  duration?: number

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

  /** Whether message is treated as HTML string */
  dangerouslyUseHTMLString?: boolean

  /** Callback function when closed */
  onClose?: () => void

  /** Callback function when notification clicked */
  onClick?: () => void

  /** Offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset */
  offset?: number

  /** custom position */
  position?: NotificationPosition
}

export interface ElNotification {
  /** Show a notification */
  (options: ElNotificationOptions): ElNotificationComponent

  /** Show a success notification */
  success (message: string | VNode): ElNotificationComponent

  /** Show a success notification */
  success (options: ElNotificationOptions): ElNotificationComponent

  /** Show a warning notification */
  warning (message: string | VNode): ElNotificationComponent

  /** Show a warning notification */
  warning (options: ElNotificationOptions): ElNotificationComponent

  /** Show an info notification */
  info (message: string | VNode): ElNotificationComponent

  /** Show an info notification */
  info (options: ElNotificationOptions): ElNotificationComponent

  /** Show an error notification */
  error (message: string | VNode): ElNotificationComponent

  /** Show an error notification */
  error (options: ElNotificationOptions): ElNotificationComponent
}

declare module 'vue/types/vue' {
  interface Vue {
    /** Displays a global notification message at the upper right corner of the page */
    $notify: ElNotification
  }
}