import MessageBox, { MessageBoxProps } from "../common/MessageBox";
import ReactDom from "react-dom";
import React from "react";

type Message = string | React.ReactNode;

type Options = Omit<MessageBoxProps, 'type'>

type MessageRenderOptions = MessageBoxProps & { message: Message;};

const messageRender = ({
  type,
  duration,
  message,
}: MessageRenderOptions) => {
  const dom = document.createElement('div');
  document.body.appendChild(dom);
  ReactDom.render(
    <MessageBox type={type} duration={duration}>
      {message}
    </MessageBox>,
    dom
  );
};

class MessageNotion {
  info(message: Message, options?: Options) {
    messageRender({
      type: "info",
      message,
      ...options,
    });
  }

  success(message: Message, options?: Options) {
    messageRender({
      type: "success",
      message,
      ...options,
    });
  }

  error(message: Message, options?: Options) {
    messageRender({
      type: "error",
      message,
      ...options,
    });
  }

  warning(message: Message, options?: Options) {
    messageRender({
      type: "warning",
      message,
      ...options,
    });
  }
}
export default new MessageNotion();
