import React from 'react'
import PropTypes from 'prop-types'
import Banner from 'components/banner'
import {renderWithCurrency} from 'common-fe/utils/render'

const CouponBanner = ({className, coupon}) => {
    if (!coupon) {
        return null
    }

    const {amountOff, error, isLoading, percentOff, valid} = coupon

    const isWarning = !error && typeof valid === 'boolean' && !valid
    const isAmountOff = typeof amountOff === 'number'
    const isPercentOff = typeof percentOff === 'number'

    let header

    if (isAmountOff) {
        header = `A ${renderWithCurrency(
            amountOff / 100,
            coupon.currency.toUpperCase()
        )} discount has been applied to all relevant plans!`
    }

    if (isPercentOff) {
        header = `A ${percentOff}% discount has been applied to all relevant plans!`
    }

    if (isLoading) {
        header = 'Retrieving discount...'
    }

    if (isWarning) {
        header =
            'The discount code you have entered has either expired or reached its redemption limit.'
    }

    if (error) {
        header = error
    }

    return (
        <Banner
            className={className}
            error={Boolean(error)}
            neutral={isLoading}
            rounded
            info={valid}
            warning={isWarning}
        >
            {header}
        </Banner>
    )
}

CouponBanner.propTypes = {
    ...Banner.propTypes,
    coupon: PropTypes.object,
}

export default CouponBanner