import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import type { SxValue } from "../CSSFab";

export type ModalI18nKey = "title" | "okText" | "cancelText" | "closeAriaLabel" | (string & {});

export type ModalLocaleText = Partial<{
  title: string;
  okText: string;
  cancelText: string;
  closeAriaLabel: string;
}>;

export type ModalFooterButton = {
  key: string;
  text: string;
  onClick: () => void;
};

export interface ModalProps
  extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "style" | "className"> {
  /** 模态框内容 */
  children?: ReactNode;
  /** 标题，优先级高于 i18n */
  title?: string;
  /** 确定按钮文案，优先级高于 i18n */
  okText?: string;
  /** 取消按钮文案，优先级高于 i18n */
  cancelText?: string;
  /** 是否打开 */
  open?: boolean;
  /** 关闭回调 */
  onClose?: () => void;
  /** 确定回调，若未传则默认调用 onClose */
  onOk?: () => void;
  /** 容器宽度 */
  width?: string | number;
  /** Style extension via CSSFab sx */
  sx?: SxValue;
  style?: CSSProperties;
  className?: string;
  /** 点击遮罩是否关闭 */
  maskClosable?: boolean;
  /** 自定义底部按钮，传入后替代默认的取消/确定 */
  footerButtons?: ModalFooterButton[];
  /** 覆盖 locale 文案 */
  localeText?: ModalLocaleText;
}

declare function Modal(props: ModalProps): JSX.Element;

export { Modal };
export default Modal;