import React, { useMemo } from "react"
import { ModalProps } from "./interface"
import { Modal as AuiModal } from "@atomintl/aui-next"
import ModalHead from "@components/Modal/Head"
import ModalContent from "@components/Modal/Content"
import ModalActions from "@components/Modal/Actions"
import "./index.css"
/**
 * modal组件
 *
 *
 * ### 引用方法
 * ```tsx
 * import { Modal } from "@atomintl/exchange-ui"
 * ```
 */
const Modal: React.FC<ModalProps> = props => {
  const { children, hideHead, hideActions, classes } = props

  const onCancel = useMemo(() => {
    if (typeof props.onCancel === "function") {
      return props.onCancel
    }
    return props.onClose
  }, [props.onCancel, props.onClose])

  const onOk = useMemo(() => {
    if (typeof props.onOk === "function") {
      return props.onOk
    }
    return props.onClose
  }, [props.onOk])

  // PaperProps={{ className: "nts-modal-body-hw-center" }}
  return (
    <AuiModal
      classes={{ content: "nts-modal-content" }}
      PaperProps={{ className: "nts-modal-paper" }}
      {...props}
      padding={"none"}
      header={hideHead ? null : <ModalHead {...props} className={classes?.head} />}
      footer={
        hideActions ? null : <ModalActions {...props} className={classes?.actions} onCancel={onCancel} onOk={onOk} />
      }
    >
      <ModalContent padding={props.padding} classes={classes}>
        {children}
      </ModalContent>
    </AuiModal>
  )
}

export { ModalProps, BaseNtsModalProps } from "./interface"
export default Modal

// import { ntsConfirm } from "./Confirm"

// type NtsModal = typeof Modal & { confirm: Function }

// const NtsModal = Modal as NtsModal

// NtsModal.confirm = ntsConfirm

// Modal.defaultProps = {
//   open: false,
//   hideHead: false,
//   hideActions: false,
//   hideBackdrop: false,
//   unmountOnExit: true
// }
// export default NtsModal