import { Modal } from 'antd'
import { useCallback } from 'react'

import { cloudConfigControllerResumeChangefeed } from 'apiClient/services/devops'

const ResumeChangefeed = ({
  changefeed_id,
  cluster_type
}: {
  changefeed_id: string
  cluster_type: string
}) => {
  const handleResume = useCallback(async () => {
    Modal.info({
      title: 'Info',
      closable: true,
      content: (
        <div>
          <p>
            Are you sure to <b>Resume</b> the Changefeed?
          </p>
        </div>
      ),
      okText: 'Confirm',
      async onOk() {
        try {
          const id = (
            await cloudConfigControllerResumeChangefeed(
              cluster_type,
              changefeed_id
            )
          ).data.instance_id
          Modal.success({
            title: 'info',
            content: (
              <div>
                <p>
                  Successfully submit the request to Resume the changefeed.
                  <br></br>
                  <br></br>
                  To check the progress of this operation, please refer to the{' '}
                  <a href={`/operations/${id}`}>Detail</a> page.
                </p>
              </div>
            ),
            onOk() {
              window.open(`/operations/${id}`, '_blank')
            }
          })
        } catch (error) {
          Modal.error({
            title: error.response.data.code,
            content: error.response.data.message
          })
        }
      }
    })
  }, [changefeed_id, cluster_type])
  return <a onClick={handleResume}>Resume</a>
}

export default ResumeChangefeed