/* global STRIPE_API_KEY */
import React from 'react'
import PropTypes from 'prop-types'
import StripeCheckout from 'react-stripe-checkout'
import Button from 'react-uikit/button'

class CheckoutWidget extends React.PureComponent {
    submit = (token) => {
        this.props.onCheckout?.(token)
    }

    render() {
        const {amount, buttonText, className, email, size} = this.props

        return (
            <StripeCheckout
                amount={amount}
                billingAddress
                ComponentClass="div"
                currency="USD"
                description="Finance Simulation Platform"
                email={email}
                image="https://pbs.twimg.com/profile_images/902971778888294401/KlvP99o6_400x400.jpg"
                locale="auto"
                name="EquitySim"
                panelLabel="Pay"
                stripeKey={STRIPE_API_KEY}
                token={this.submit}
                zipCode
            >
                <Button
                    className={className}
                    variant="primary"
                    size={size}
                    text={buttonText}
                />
            </StripeCheckout>
        )
    }
}

CheckoutWidget.propTypes = {
    amount: PropTypes.number.isRequired,
    buttonText: PropTypes.string,
    className: PropTypes.string,
    email: PropTypes.string,
    size: PropTypes.oneOf(['small', 'large']),
    onCheckout: PropTypes.func,
}

CheckoutWidget.defaultProps = {
    buttonText: 'Make a Payment',
}

export default CheckoutWidget