import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react'
import RcDialog from 'rc-dialog'

import { usePrefix } from '../ConfigProvider'
import Mask from '../internal/Mask'
import { useModalProps } from './hooks'
import { WithRef } from '../utils/type'

export interface Props {
  /** 是否可见 */
  visible?: boolean
  /** 标题 */
  title: ReactNode
  /**
   * 固定宽度
   *
   * @default 600
   */
  width?: number
  /**
   * 自定义底部区域(按钮所在的位置)
   */
  footer?: ReactNode
  /**
   * 点击确定回调
   */
  onOk?: () => Promise<void> | void
  /**
   * 点击模态框右上角叉、取消按钮、遮罩层或键盘按下 Esc 时的回调
   */
  onCancel?: () => void
  /**
   * 不可见时是否自动销毁
   *
   * @default false
   */
  autoDestroy?: boolean
  /** 自定义样式名 */
  className?: string
  /** 自定义样式 */
  style?: CSSProperties
  /** 模态框内容 */
  children?: ReactNode
  /**
   * 根元素的 html 属性
   */
  rootHtmlProps?: WithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
  /**
   * 遮罩的 html 属性
   */
  maskHtmlProps?: WithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
  /**
   * 点击 mask 是否允许关闭对话框；默认使用全局配置 mask.modal.clickable (false)
   */
  maskClickable?: boolean
  /**
   * 是否允许通过键盘的 `esc` 按钮关闭对话框
   *
   * @default true
   */
  keyboard?: boolean
  /**
   * 是否垂直居中展示
   *
   * @default false
   */
  centered?: boolean
}

export interface InternalModalProps extends Props {
  /** 自定义 modal render 逻辑 */
  renderModal?: (node: ReactNode) => ReactNode
}

/** 对（icecream）内的 Modal 实现，相比对外的 Modal 提供更高的可定制化程度 */
export function InternalModal(props: InternalModalProps) {
  const prefix = usePrefix('modal')
  const { maskProps, rcDialogProps } = useModalProps(props, prefix)

  return (
    <Mask {...maskProps}>
      <RcDialog {...rcDialogProps} />
    </Mask>
  )
}

export default function Modal(props: Props) {
  return <InternalModal {...props} />
}