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

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

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

interface IProps {
  id: string
  open: boolean
  onClose: () => void
}

export default observer(({ id, open, onClose }: IProps) => {
  const [isProcessing, setProcessing] = useState(false)
  const [error, setError] = useState('')

  const { actions } = useStores()

  const toggleModalOpen = (_open: boolean) => () => {
    setError('')
    onClose()
  }

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

    try {
      await actions.setDefaultPayment(id)

      toggleModalOpen(false)()
    } catch (e) {
      setError(getErrorMessage(e))
    }

    setProcessing(false)
  }

  const onCancel: React.MouseEventHandler<HTMLButtonElement> = (e) => {
    onClose()
    e.stopPropagation()
  }

  useEffect(() => {
    if (!open) {
      setError('')
    }
  }, [open])

  return (
    <Modal
      opened={open}
      title={<Typography variant="headline-md">Set as Default</Typography>}
      onClose={() => {
        onClose()
        toggleModalOpen(false)()
      }}
      centered
      trapFocus={false}
    >
      <Typography variant="body-lg">Are you sure to set this credit card as default?</Typography>

      {error ? <ErrorMessage title="Failed!">{error}</ErrorMessage> : null}

      <Group justify="flex-end" mt={24}>
        <Button variant="default" onClick={onCancel} data-mp-event="Cancel Set Default Dard">
          Cancel
        </Button>
        <Button loading={isProcessing} data-mp-event="Switch Credit Card Confirm Button Clicked" onClick={handleClick}>
          Yes
        </Button>
      </Group>
    </Modal>
  )
})