import { useState } from 'react'
import { Button, Modal } from 'antd'

const withModal = (WrappedComponent) => {
  return function WithModalComponent({ buttonText = 'Open Modal', open: externalOpen, ...props }: any) {
    const [internalOpen, setOpen] = useState(false)

    const actionOpen = externalOpen || internalOpen

    const handleOk = async () => {
      setOpen(false)
    }

    const handleCancel = async () => {
      setOpen(false)
    }

    return (
      <>
        <Button type="primary" onClick={() => setOpen(true)}>
          {buttonText}
        </Button>
        <Modal open={actionOpen} onOk={handleOk} onCancel={handleCancel} destroyOnClose {...props}>
          <WrappedComponent setOpen={setOpen} />
        </Modal>
      </>
    )
  }
}
export default withModal
