import { Button, Group, Modal, Stack, Typography } from '@tidbcloud/uikit'
import React, { useState } from 'react'

import { FormErrorMessage } from 'dbaas/components/Form'
import { ModalCodeTitle } from 'dbaas/components/Modal/CodeTitle'
import { getErrorMessage } from 'dbaas/services/errorCodes'

interface IProps {
  id: string
  name: string
  isDeleting?: boolean
  isOpen: boolean
  onClose: () => void
  onConfirm: (i: string) => Promise<any>
}

const DeleteModal = ({ id, name, isDeleting, isOpen, onClose, onConfirm }: IProps) => {
  const [error, setError] = useState('')

  const handleClose = () => {
    setError('')
    onClose()
  }

  const handleDismissErrorMessage = () => {
    setError('')
  }

  const handleConfirm = async () => {
    try {
      await onConfirm(id)
    } catch (error) {
      setError(getErrorMessage(error))
    }
  }

  if (!id) return null

  return (
    <Modal
      opened={isOpen}
      onClose={handleClose}
      size="lg"
      centered
      title={
        <Group gap={8}>
          Delete
          <ModalCodeTitle>{name}</ModalCodeTitle>
        </Group>
      }
    >
      <Stack align="flex-start">
        <Typography variant="body-lg" py={8}>
          Backup deletion is unrecoverable. Do you still want to delete this backup?
        </Typography>

        {error && <FormErrorMessage message={error} onDismiss={handleDismissErrorMessage} />}

        <Group w="100%" justify="flex-end">
          <Button variant="default" onClick={handleClose}>
            Cancel
          </Button>
          <Button
            color="red"
            variant="light"
            loading={isDeleting}
            data-mp-event="Delete Backup Consequence Button Clicked"
            onClick={handleConfirm}
          >
            I understand, delete it
          </Button>
        </Group>
      </Stack>
    </Modal>
  )
}

export default React.memo(DeleteModal)