import { Typography, openModal, closeModal } from '@tidbcloud/uikit'
import { Form } from '@tidbcloud/uikit/biz'
import React from 'react'

interface ConfirmModalProps {
  title?: string
  content?: string | React.ReactNode
  onSubmit: () => Promise<void>
  submitText?: string
  className?: string
}

export const openConfirmModal = ({ title, content, onSubmit, submitText }: ConfirmModalProps) => {
  const modalId = 'contract-confirm-modal'
  const handleSubmit = async () => {
    await onSubmit()
    closeCurrentModal()
  }

  const closeCurrentModal = () => {
    closeModal(modalId)
  }

  return openModal({
    modalId,
    title: <Typography variant="headline-md">{title}</Typography>,
    centered: true,
    size: 500,
    children: (
      <div>
        {!!content && <Typography variant="body-lg">{content}</Typography>}
        <Form onSubmit={handleSubmit} onCancel={closeCurrentModal} actionsProps={{ confirmText: submitText }}></Form>
      </div>
    )
  })
}