import { Button, Group, Input, notifier, Stack } from '@tidbcloud/uikit'
import { useState } from 'react'

import { useDeleteDMJob } from 'dbaas/services/dataflow'
import { DmJob } from 'dbaas/services/dataflow/interface'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'

export const DeleteDMJob = ({
  job,
  onCancel,
  onConfirm
}: {
  job: DmJob
  onCancel?: () => void
  onConfirm?: () => void
}) => {
  const [val, setVal] = useState('')
  const deleteJobMutation = useDeleteDMJob()
  const {
    store: { tenantData, activeProjectId, currentCluster }
  } = useStores()

  const deleteJob = async () => {
    try {
      await deleteJobMutation.mutateAsync({
        orgId: tenantData.id,
        projectId: activeProjectId,
        clusterId: currentCluster?.id!,
        id: job.id!
      })
      notifier.success('Data migration job is deleting...')
      onConfirm?.()
    } catch (e) {
      notifier.error(getErrorMessage(e))
    }
  }

  return (
    <Stack>
      <p>Deleted data migration job cannot be recovered. Confirm to delete it permanently.</p>
      <p>
        Please type <b>{job?.name}</b> to confirm.
      </p>
      <Input autoFocus value={val} onChange={(e: any) => setVal(e.target.value)} />

      <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}
          disabled={val !== job?.name}
          onClick={() => {
            deleteJob()
          }}
          data-mp-event="Confirm Delete DM Job Clicked"
        >
          I understand the consequences, delete this job
        </Button>
      </Group>
    </Stack>
  )
}