/* eslint-disable import/no-mutable-exports */
import { Media } from '@/styles/media';
import type { MessageInstance } from 'antd/es/message/interface';
import type { NotificationInstance } from 'antd/es/notification/interface';
import type { ReactNode } from 'react';
import { message as antdMessage, notification as antdNotification } from 'ui/elements';

export let message: Readonly<MessageInstance>;
export let notification: Readonly<NotificationInstance>;

export function Notification({ children }: { readonly children?: ReactNode }) {
  const [messageApi, messageContextHolder] = antdMessage.useMessage({
    duration: 1.2,
    maxCount: 3,
    top: 70,
  });

  const [notificationApi, notificationContextHolder] = antdNotification.useNotification({
    maxCount: 3,
    placement: 'bottomRight',
    stack: { threshold: 1 },
  });

  message = messageApi;
  notification = notificationApi;

  return (
    <>
      {messageContextHolder}
      <Media greaterThanOrEqual="laptop">{notificationContextHolder}</Media>
      {children}
    </>
  );
}
