import { createApp, ComponentPublicInstance, nextTick } from 'vue'
import component from './index.vue'

const positions = ['top-right', 'top-center', 'top-left', 'bottom-center', 'bottom-left', 'bottom-right']

interface NotificationOptions {
	title?: string
	text?: string
	content?: string
	message?: string
	position?: string
	type?: string
	color?: string
	duration?: number | string
	border?: string
	iconClass?: string
	square?: boolean
	[x: string]: unknown
}

export type LoadingInstance = ComponentPublicInstance<
	{ title: string; text: string; color: string; type: string },
	{},
	{ visible: boolean }
> & {
	close(): () => void
}

const Notification = function (options: NotificationOptions = {}) {
	// position & parent
	if (!options.position || !positions.includes(options.position)) options.position = 'top-right'
	let parent = document.body.querySelector(`.si-notification-parent--${options.position}`)
	if (!parent) {
		parent = document.createElement('div')
		parent.classList.add('si-notification-parent')
		parent.classList.add(`si-notification-parent--${options.position}`)
	}
	options.parent = parent
	delete options.position

	// set default icon by type
	if (!options.iconClass)
		switch (options.type) {
			case 'primary':
			case 'info':
				options.iconClass = 'bx bx-info-circle'
				break
			case 'success':
				options.iconClass = 'bx bx-check-circle'
				break
			case 'warning':
				options.iconClass = 'bx bx-error-circle'
				break
			case 'danger':
				options.iconClass = 'bx bx-x-circle'
				break
			case 'dark':
				options.iconClass = 'bx bx-moon'
				break
			case 'light':
				options.iconClass = 'bx bx-sun'
				break
		}

	const el = document.createElement('div')
	options.container = el
	const notificationApp = createApp(component, options)
	const notificationInstance = notificationApp.mount(el) as LoadingInstance

	parent.appendChild(el)
	document.body.appendChild(parent)

	nextTick(() => {
		notificationInstance.visible = true
	})

	return notificationInstance
}


Notification.info = (message: string, title: string | NotificationOptions, options: NotificationOptions) => {
	if (typeof title === 'string') Notification({ type: 'info', message, title, ...options })
	else Notification({ type: 'info', message, ...options })
}
Notification.success = (message: string, title: string | NotificationOptions, options: NotificationOptions) => {
	if (typeof title === 'string') Notification({ type: 'success', message, title, ...options })
	else Notification({ type: 'success', message, ...options })
}
Notification.warning = (message: string, title: string | NotificationOptions, options: NotificationOptions) => {
	if (typeof title === 'string') Notification({ type: 'warning', message, title, ...options })
	else Notification({ type: 'warning', message, ...options })
}
Notification.danger = (message: string, title: string | NotificationOptions, options: NotificationOptions) => {
	if (typeof title === 'string') Notification({ type: 'danger', message, title, ...options })
	else Notification({ type: 'danger', message, ...options })
}
Notification.dark = (message: string, title: string | NotificationOptions, options: NotificationOptions) => {
	if (typeof title === 'string') Notification({ type: 'dark', message, title, ...options })
	else Notification({ type: 'dark', message, ...options })
}
Notification.light = (message: string, title: string | NotificationOptions, options: NotificationOptions) => {
	if (typeof title === 'string') Notification({ type: 'light', message, title, ...options })
	else Notification({ type: 'light', message, ...options })
}

export default Notification