import React, {
  useRef,
  ReactNode,
  useState,
  useEffect,
  ReactElement,
} from 'react'
import { UI } from '@hyext/hy-ui'

const { Modal } = UI

type ModalProps = {
  visible: boolean
  onClose: () => void
}

export function createModalHOC<T>(name: string, Content: React.FunctionComponent<T>) {
  const modalFC = function <U = {}>(props: ModalProps & U & T) {
    const ref = useRef<any>(null)
    const { visible, onClose } = props

    useEffect(() => {
      if (visible) {
        ref.current?.open()
      } else {
        ref.current?.close()
      }
    }, [visible])

    return (
      <Modal
        ref={ref}
        onClose={() => {
          onClose()
        }}
      >
        <Content {...props}></Content>
      </Modal>
    )
  }
  modalFC.displayName = `$HOC(modal-${name})`
  return modalFC
}

// 弹窗内容实现
function XXXContent() {
  return null
}

// 弹窗组件
const XXXModal = createModalHOC('xxx', XXXContent)