import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import couponTypes from 'common-fe/constants/coupon-types'
import {tableDateFormat} from 'global/constants/date-formats'
import {renderWithCurrency} from 'common-fe/utils/render'
import {SUBSCRIPTION_FREE_SECURITY_TYPES} from 'store/config'

import TradeButton from 'components/trade-button'

import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)

const TradeBondsTableRow = ({data, policy, onTrade}) => {
    if (!data) {
        return (
            <tr>
                <td>– –</td>
            </tr>
        )
    }

    const {
        couponRate,
        couponTypeCode,
        currency,
        currentPrice,
        currentYield,
        displayName,
        id,
        ISIN,
        maturityDate,
        parAmount = 1000,
        percentOfParDisplay,
        type,
    } = data

    const {
        canTrade,
        reason: {canTrade: buttonTooltip},
    } = policy.forSecurity(data)

    const isLocked =
        !policy.isSubscriptionActive &&
        !SUBSCRIPTION_FREE_SECURITY_TYPES.includes(type)
    const rootClassNames = bem.classNames('c-trade-bonds-table-row')
    const issuerClassNames = bem.classNames('c-trade-bonds-table-row__issuer')
    const captionClassNames = bem.classNames('c-trade-bonds-table-row__caption')
    const captionNumberClassNames = bem.classNames(
        'c-trade-bonds-table-row__caption--number'
    )
    const numberClassNames = (percent = false) =>
        bem.classNames('c-trade-bonds-table-row__number', {percent})
    const handleTrade = () => onTrade && onTrade({securityId: id})

    return (
        <tr className={rootClassNames}>
            <td>
                <span className={issuerClassNames}>{displayName}</span>
                <br />
                <span className={captionClassNames}>{ISIN}</span>
            </td>
            <td>
                <span className={captionClassNames}>&nbsp;</span>
                <br />
                <span className={numberClassNames()}>
                    {moment(maturityDate).format(tableDateFormat)}
                </span>
            </td>
            <td>
                <span className={captionClassNames}>
                    {couponTypes[couponTypeCode]
                        ? couponTypes[couponTypeCode].label
                        : 'Other'}
                </span>
                <br />
                <span className={numberClassNames(true)}>
                    {typeof couponRate === 'number'
                        ? couponRate.toFixed(4)
                        : '--'}
                </span>
            </td>
            <td>
                <span className={captionClassNames}>&nbsp;</span>
                <br />
                <span className={numberClassNames(true)}>
                    {typeof currentYield === 'number'
                        ? currentYield.toFixed(4)
                        : '--'}
                </span>
            </td>
            <td>
                <span className={captionClassNames}>
                    <em className={captionNumberClassNames}>
                        {`${percentOfParDisplay}%`}
                    </em>
                    &thinsp;of&thinsp;
                    <em className={captionNumberClassNames}>
                        {renderWithCurrency(parAmount, currency, {decimal: 0})}
                    </em>
                    &thinsp;{currency}
                </span>
                <br />
                <span className={numberClassNames()}>
                    {typeof currentPrice === 'number'
                        ? renderWithCurrency(currentPrice, currency, {
                              largeNumber: true,
                          })
                        : '--'}
                </span>
            </td>
            <td>
                <TradeButton
                    disabled={!canTrade && !isLocked}
                    isLocked={isLocked}
                    tooltip={buttonTooltip}
                    onClick={handleTrade}
                />
            </td>
        </tr>
    )
}

TradeBondsTableRow.propTypes = {
    data: PropTypes.shape({
        displayName: PropTypes.string,
        couponRate: PropTypes.number,
        couponTypeCode: PropTypes.string,
        currency: PropTypes.string,
        currentPrice: PropTypes.number,
        currentYield: PropTypes.number,
        id: PropTypes.string,
        ISIN: PropTypes.string,
        issuer: PropTypes.string,
        maturityDate: PropTypes.string,
        parAmount: PropTypes.number,
        percentOfParDisplay: PropTypes.string,
        type: PropTypes.string,
    }),
    policy: PropTypes.object,
    onTrade: PropTypes.func,
}

export default TradeBondsTableRow