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

import { deletePaymentMethod } from 'dbaas/services'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'

import { ErrorMessage } from '../PaymentMethod/PaymentMethodForm'

interface IProps {
  id: string
  opened: boolean
  trigger?: React.ReactElement
  onDelete?: () => void
  onError?: () => void
  onClose: () => void
}

export default observer(({ id, onDelete, onError, opened, onClose }: IProps) => {
  const [isDeleting, setDeleting] = useState(false)
  const [error, setError] = useState('')

  const {
    store: { tenantData },
    actions: { fetchPaymentMethods }
  } = useStores()

  const handleClick = async () => {
    setDeleting(true)

    try {
      await deletePaymentMethod(tenantData.id, id)

      fetchPaymentMethods(tenantData.id)
      onDelete?.()
    } catch (e) {
      setError(getErrorMessage(e))
      onError?.()
    }

    setDeleting(false)
  }

  return (
    <div
      onClick={(e) => {
        e.stopPropagation()
      }}
    >
      <Modal
        opened={opened}
        onClose={onClose}
        centered
        size="auto"
        // this zIndex should be greater than Menu.item( which is 300)
        zIndex={301}
        title={<Typography variant="headline-md">Delete Credit Card</Typography>}
      >
        <div>
          <Typography variant="body-lg">
            Are you sure to delete this credit card? Deleted information cannot be recovered.
          </Typography>

          {error ? <ErrorMessage title="Failed!">{error}</ErrorMessage> : null}
          <Group justify="flex-end" mt={24}>
            <Button variant="default" data-mp-event="Cancel Delete Credit Card" onClick={onClose}>
              Cancel
            </Button>
            <Button
              color="red"
              variant="light"
              loading={isDeleting}
              data-mp-event="Credit Card Delete Consequence Button Clicked"
              onClick={handleClick}
            >
              I understand the consequence, delete this card
            </Button>
          </Group>
        </div>
      </Modal>
    </div>
  )
})