import type { VNodeChild } from 'vue'
import type { NotificationOptions } from 'element-plus'

export interface INotificationArguments {
	message: string | VNodeChild
	type: 'success' | 'error' | 'warning' | 'info'
	title?: string
}

export default defineNuxtPlugin(() => {
	const duration = 5000
	const config = useAppConfig()

	function notify(args: INotificationArguments) {
		const progressBar = h('div', {
			class: 'el-notification__progress',
			style: {
				animationDuration: `${duration}ms`,
			},
		})

		const bodyContent =
				typeof args.message === 'string'
						? h('p', args.message)
						: args.message

		const messageVNode = h('div', [
			bodyContent,
			progressBar,
		])

		const notification = ElNotification({
			title: args.title,
			duration: 0,
			message: messageVNode,
			type: args.type,
			position: config.ui.notificationPosition,
		} as NotificationOptions)

		setTimeout(() => {
			notification.close()
		}, duration)
	}

	return {
		provide: {
			notify,
		},
	}
})