import { Modal, ModalFuncProps } from 'antd'
import React from 'react'
import { HookAPI } from 'antd/es/modal/useModal'
import { useDialog } from '@/components/dialog'

export interface AlterProps extends ModalFuncProps {
  onLoad?: () => void
  alterType: keyof HookAPI | 'dialog'
  children: JSX.Element | React.ReactNode

}

const ModalPro = ({ onLoad, alterType, children, ...props }: AlterProps) => {

  const [ modal, modalHolder ] = Modal.useModal()
  const [ dialogRef, dialog, ] = useDialog(props)


  return (
          <>
            <span onClick={() => {
              if (onLoad) {
                onLoad()
              }
              if (alterType === 'dialog') {
                dialogRef.current?.show()
              } else {
                modal[alterType]?.(props)
              }
            }}>{children}</span>
            {alterType !== 'dialog' && modalHolder}
            {alterType === 'dialog' && dialog}
          </>
  )
}

export default ModalPro