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

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

export default defineNuxtPlugin(() => {
  const config = useAppConfig();

  function notify(args: INotificationArguments) {
    if (process.server) return;

    const duration = 5000;
    const progressBar = h('div', {
      class: `el-notification__progress ${args.type}`,
      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,
    },
  }
});