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

import { SharedTiDB } from 'dbaas/screens/NextGen/shared/model/shared-tidb-state'
import { useDeletePremiumMigration } from 'dbaas/services/dataflow'
import { V1beta2PremiumMigration } from 'dbaas/services/dataflow/interface'
import { getErrorMessage } from 'dbaas/services/errorCodes'

export const DeletePremiumDMJob = ({
  job,
  onCancel,
  onConfirm,
  tidb
}: {
  job: V1beta2PremiumMigration
  tidb: SharedTiDB
  onCancel?: () => void
  onConfirm?: () => void
}) => {
  const deleteJobMutation = useDeletePremiumMigration()

  const deleteJob = async () => {
    try {
      await deleteJobMutation.mutateAsync({
        tidbId: tidb.tidbId!,
        migrationId: job.migration_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.display_name}</b>?
      </Typography>

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