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

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

const RestartCDC = ({
  ticdc_cluster_id,
  cluster_type
}: {
  ticdc_cluster_id: string
  cluster_type: string
}) => {
  const handleRestart = useCallback(async () => {
    Modal.info({
      title: 'Info',
      closable: true,
      content: (
        <div>
          <p>
            Are you sure to <b>RESTART</b>?
          </p>
        </div>
      ),
      okText: 'Confirm',
      async onOk() {
        try {
          const id = (
            await cloudConfigControllerRestartTiCDCCluster(
              cluster_type,
              ticdc_cluster_id
            )
          ).data.instance_id
          Modal.success({
            title: 'info',
            content: (
              <div>
                <p>
                  Successfully submit the request to restart the ticdc.
                  <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
          })
        }
      }
    })
  }, [])
  return (
    <a
      onClick={() => {
        handleRestart()
      }}
    >
      Restart TiCDC
    </a>
  )
}

export default RestartCDC