import { Button, Group, notifier, Stack, Typography } from '@tidbcloud/uikit'

import { useMigrationServiceDeleteTask } from 'dbaas/services/api-clients/legacy/serverless'
import { MigrationTask } from 'dbaas/services/api-clients/legacy/serverless/interface'
import { getErrorMessage } from 'dbaas/services/errorCodes'

export const DeleteEssentialDMJob = ({
  job,
  orgId,
  projectId,
  clusterId,
  onCancel,
  onConfirm
}: {
  job: MigrationTask
  orgId: string
  projectId: string
  clusterId: string
  onCancel?: () => void
  onConfirm?: () => void
}) => {
  const deleteTask = useMigrationServiceDeleteTask()

  const deleteJob = async () => {
    try {
      await deleteTask.mutateAsync({
        orgId,
        projectId,
        clusterId,
        id: job.id!
      })
      notifier.success('Migration job delete requested.')
      onConfirm?.()
    } catch (e) {
      notifier.error(getErrorMessage(e, true) || 'Failed to delete the job')
    }
  }

  return (
    <Stack>
      <Typography variant="body-lg">
        Deleted data migration job cannot be recovered. Are you sure you want to delete <b>{job.name}</b>?
      </Typography>

      <Group justify="flex-end">
        <Button variant="default" onClick={onCancel} data-mp-event="Cancel Delete DM Job Clicked">
          Cancel
        </Button>
        <Button
          loading={deleteTask.isLoading}
          onClick={deleteJob}
          variant="outline"
          data-mp-event="Confirm Delete DM Job Clicked"
        >
          Yes, delete it
        </Button>
      </Group>
    </Stack>
  )
}