import { App } from "antd";
import type { ModalFunc } from "antd/es/modal/confirm";

import styles from "./index.module.scss";

export const ModalContext: React.FC = () => {
  const { message, notification, modal } = App.useApp();
  window.message = message;
  window.notification = notification;
  window.modal = modal as any;
  return <></>;
};

type PropsWithOnResult<Props extends {}, Result extends {}> = Props & {
  onResult: (result: Result) => void;
};

export type ReactFcWithOnResult<Props extends {}, Result extends {}> = React.FC<
  PropsWithOnResult<Props, Result>
>;

export const Title: React.FC<React.PropsWithChildren> = ({ children }) => (
  <div className={styles.title}>{children}</div>
);

export const Footer: React.FC<React.PropsWithChildren> = ({ children }) => (
  <div className={styles.footer}>{children}</div>
);

/**
 * 目的是通过传入不同的 Content 组件和配置选项，生成不同类型的弹窗，并在弹窗的 Content 中处理回调，最终返回一个 Promise 来处理弹窗的结果。
 */
export const genModal = <Props extends {}, Result extends {}>({
  Content,
  type = "confirm",
  ...rest
}: {
  Content: React.ComponentType<PropsWithOnResult<Props, Result>>;
  type?: "confirm" | "info" | "success" | "error";
} & Omit<
  Parameters<ModalFunc>[0],
  "content" | "onCancel" | "onOk" | "footer" | "title"
>) => {
  return (props: Props) =>
    new Promise<Result>((rs) => {
      const { destroy } = modal[type]({
        content: (
          <Content
            onResult={(result) => {
              rs(result);
              destroy();
            }}
            {...props}
          />
        ),
        footer: null,
        centered: true,
        ...rest,
      });
    });
};
