import { notifier } from '@tidbcloud/uikit'
import { Modal, Button, Box, Flex } from '@tidbcloud/uikit'
import React, { FC } from 'react'

import { getErrorMessage } from 'dbaas/services/errorCodes'

interface DeleteModalProps {
  type: 'cluster' | 'backup'
  isOpen: boolean
  isDeleting?: boolean
  closeModal: () => void
  onConfirm: () => Promise<any>
}

const DeleteModal: FC<React.PropsWithChildren<DeleteModalProps>> = ({
  type,
  isOpen,
  isDeleting = false,
  closeModal,
  onConfirm,
  children
}) => {
  const handleClose = () => {
    closeModal()
  }

  const handleConfirm = async () => {
    try {
      await onConfirm()
    } catch (error) {
      const message = getErrorMessage(error)
      notifier.error(message)
    }
  }

  return (
    <Modal
      opened={isOpen}
      onClose={handleClose}
      centered
      size={600}
      title={`Delete ${type.charAt(0).toUpperCase() + type.slice(1)}`}
    >
      <div>
        <Box mb={16}>{children}</Box>
        <Flex justify="flex-end">
          <Button variant="default" mr={16} onClick={handleClose} data-mp-event="mp-cancel-1691461012635">
            Cancel
          </Button>
          <Button
            color="red"
            variant="light"
            loading={isDeleting}
            disabled={isDeleting}
            data-mp-event="Recycle Bin Consequence Button Clicked"
            onClick={handleConfirm}
          >
            I understand, delete this {type}
          </Button>
        </Flex>
      </div>
    </Modal>
  )
}

export default DeleteModal