import React from 'react'
import PropTypes from 'prop-types'
import {Elements} from 'react-stripe-elements'

import ModalForm from 'react-uikit/modal/form'
import CardUpdateForm from 'containers/forms/card-update'
import StripeHookProvider from 'global/hooks/stripe'

const CardUpdateModal = ({canDismiss, isShowing, withOverlay, onDismiss}) => {
    return (
        <ModalForm
            isShowing={isShowing}
            showDismissButton={canDismiss}
            tapOutsideToDismiss={canDismiss}
            title="Update Card"
            withOverlay={withOverlay}
            onDismiss={onDismiss}
        >
            <Elements>
                <StripeHookProvider>
                    <CardUpdateForm unregisterOnExit onSubmit={onDismiss} />
                </StripeHookProvider>
            </Elements>
        </ModalForm>
    )
}

CardUpdateModal.propTypes = {
    canDismiss: PropTypes.bool,
    isShowing: PropTypes.bool,
    withOverlay: PropTypes.bool,
    onDismiss: PropTypes.func,
}

CardUpdateModal.defaultProps = {
    canDismiss: true,
}

export default CardUpdateModal