/**
 * V21 Modal 对话框
 * 封装 Ant Design Modal，应用 V21 设计系统样式
 */
import React from "react";
import { Modal as AntModal } from "antd";
import type { ModalProps as AntModalProps } from "antd";
import type { ModalFuncProps } from "antd/es/modal";
import classNames from "classnames";
import "./ui.css";

export interface ModalProps extends AntModalProps {
  /** 使用 V21 样式 */
  v21?: boolean;
}

interface ModalComponent extends React.FC<ModalProps> {
  confirm: (config: ModalFuncProps) => ReturnType<typeof AntModal.confirm>;
  info: (config: ModalFuncProps) => ReturnType<typeof AntModal.info>;
  success: (config: ModalFuncProps) => ReturnType<typeof AntModal.success>;
  error: (config: ModalFuncProps) => ReturnType<typeof AntModal.error>;
  warning: (config: ModalFuncProps) => ReturnType<typeof AntModal.warning>;
}

const Modal: ModalComponent = ({
  className,
  v21 = true,
  children,
  ...rest
}) => {
  const v21Class = classNames(v21 && "xx-modal", className);
  return (
    <AntModal className={v21Class} {...rest}>
      {children}
    </AntModal>
  );
};

/** 确认对话框快捷方法 */
Modal.confirm = (config: ModalFuncProps) => {
  return AntModal.confirm({
    ...config,
    className: classNames("xx-modal-confirm", config.className),
  });
};

Modal.info = (config: ModalFuncProps) => {
  return AntModal.info({
    ...config,
    className: classNames("xx-modal-confirm", config.className),
  });
};

Modal.success = (config: ModalFuncProps) => {
  return AntModal.success({
    ...config,
    className: classNames("xx-modal-confirm", config.className),
  });
};

Modal.error = (config: ModalFuncProps) => {
  return AntModal.error({
    ...config,
    className: classNames("xx-modal-confirm", config.className),
  });
};

Modal.warning = (config: ModalFuncProps) => {
  return AntModal.warning({
    ...config,
    className: classNames("xx-modal-confirm", config.className),
  });
};

export default Modal;
