import { Box, Button, notifier, Tooltip } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'

import { AccessGuard } from 'dbaas/contexts/access-control'
import { PaymentMethodModal } from 'dbaas/screens/Stripe'

interface CreditAddProps {
  disabled?: boolean
  creditAddVisible: boolean
  creditModalVisible: boolean
  creditModalHandlers: {
    open: () => void
    close: () => void
  }
}

export const CreditAdd = observer(
  ({ disabled, creditAddVisible, creditModalVisible, creditModalHandlers }: CreditAddProps) => {
    return (
      <>
        {creditAddVisible && (
          <AccessGuard
            id="BillingPaymentCreation"
            fallback={
              <Tooltip
                withinPortal
                multiline
                sx={{ flexGrow: 1, maxWidth: 320 }}
                label="Please contact the Owner or Billing Manager to add a credit card and your discount will be applied to your next billing cycle."
              >
                <Box>
                  <Button disabled data-mp-event="mp-addcreditcard-essential">
                    Add Credit Card
                  </Button>
                </Box>
              </Tooltip>
            }
          >
            <Button
              disabled={disabled}
              onClick={creditModalHandlers.open}
              sx={{ flexGrow: 1 }}
              data-mp-event="Add Credit Card Button Clicked"
              data-mp-source="Clusters - Creation Essential"
            >
              Add Credit Card
            </Button>
          </AccessGuard>
        )}

        {creditAddVisible && (
          <PaymentMethodModal
            open={creditModalVisible}
            onClose={creditModalHandlers.close}
            onComplete={() => {
              creditModalHandlers.close()
              notifier.success('Your credit card was added successfully!')
            }}
          />
        )}
      </>
    )
  }
)