import React, {forwardRef} from 'react'
import PropTypes from 'prop-types'
import {renderRealMoney} from 'common-fe/utils/render'
import {getMonthDifference} from 'common-fe/utils/date'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

// Using `forwardRef` to silence the React warning about using ref on a function component
const PaymentLedger = forwardRef(
    ({course: {endDate, name, startDate, sponsorship}, order: {amount}}) => {
        const courseLengthMonths = getMonthDifference(
            new Date(startDate),
            new Date(endDate)
        )
        const isFree = amount === 0
        const costDisplay = isFree ? '200.00' : renderRealMoney(amount * 2)
        const sponsorshipDisplay = isFree ? '200.00' : renderRealMoney(amount)
        const totalDisplay = isFree ? 'FREE' : renderRealMoney(amount)

        const horizontalLineClasses = bem.classNames(
            'c-payment-ledger__horizontal-line'
        )
        const priceDetailClasses = bem.classNames(
            'c-payment-ledger__price-detail'
        )
        const priceLabelClasses = bem.classNames(
            'c-payment-ledger__price-label'
        )
        const priceValueClasses = bem.classNames(
            'c-payment-ledger__price-value'
        )
        const sponsorLabelClasses = bem.classNames(
            'c-payment-ledger__sponsor-label'
        )
        const sponsorValueClasses = bem.classNames(
            'c-payment-ledger__sponsor-value'
        )
        const totalLabelClasses = bem.classNames(
            'c-payment-ledger__total-label'
        )
        const totalValueClasses = bem.classNames(
            'c-payment-ledger__total-value',
            {
                free: isFree,
            }
        )

        const sponsorshipText = sponsorship
            ? `${sponsorship} Sponsorship`
            : 'EquitySim Sponsorship'

        return (
            <React.Fragment>
                <div className={priceLabelClasses}>
                    <p style={{margin: 0}}>
                        <span>{name}</span>
                        <br />
                        <span className={priceDetailClasses}>
                            Includes {courseLengthMonths} months of the Pro
                            Subscription
                        </span>
                    </p>
                    <span className={priceValueClasses}>{costDisplay}</span>
                </div>
                <p className={sponsorLabelClasses}>
                    <span>{sponsorshipText}</span>
                    <span className={sponsorValueClasses}>
                        - {sponsorshipDisplay}
                    </span>
                </p>
                <hr className={horizontalLineClasses} />
                <p className={totalLabelClasses}>
                    <span>Total</span>
                    <span className={totalValueClasses}>{totalDisplay}</span>
                </p>
            </React.Fragment>
        )
    }
)

PaymentLedger.displayName = 'PaymentLedger'

PaymentLedger.propTypes = {
    course: PropTypes.object.isRequired,
    order: PropTypes.object,
}

export default PaymentLedger