import React from 'react'
import {tableDateFormat} from 'global/constants/date-formats'
import TradeButton from 'components/trade-button'
import TradeTableGetStarted from 'components/trade-table-get-started'
import {renderWithCurrency} from 'common-fe/utils/render'
import {getStartedSteps} from '../../content'

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

const numberClassNames = (percent = false) =>
    bem.classNames('c-trade-bonds-table-placeholder__number', {percent})

const TradeBondsTableRowPlaceholder = () => {
    const coupon = 0
    const couponType = 'Coupon type'
    const currency = 'USD'
    const percentOfParDisplay = '– –%'
    const currentPrice = '– –'
    const currentYield = 0
    const parAmount = 1000
    const isin = 'ISIN'
    const issuer = 'Company name'
    const maturityDate = tableDateFormat

    const rootClassNames = bem.classNames('c-trade-bonds-table-placeholder')
    const issuerClassNames = bem.classNames(
        'c-trade-bonds-table-placeholder__issuer'
    )
    const captionClassNames = bem.classNames(
        'c-trade-bonds-table-placeholder__caption'
    )
    const captionNumberClassNames = bem.classNames(
        'c-trade-bonds-table-placeholder__caption--number'
    )

    return (
        <React.Fragment>
            <tr className={rootClassNames}>
                <td>
                    <span className={issuerClassNames}>{issuer}</span>
                    <br />
                    <span className={captionClassNames}>{isin}</span>
                </td>
                <td>
                    <span className={captionClassNames}>&nbsp;</span>
                    <br />
                    <span className={numberClassNames()}>{maturityDate}</span>
                </td>
                <td>
                    <span className={captionClassNames}>{couponType}</span>
                    <br />
                    <span className={numberClassNames(true)}>
                        {coupon.toFixed(4)}
                    </span>
                </td>
                <td>
                    <span className={captionClassNames}>&nbsp;</span>
                    <br />
                    <span className={numberClassNames(true)}>
                        {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()}>
                        $&ensp;{currentPrice}
                    </span>
                </td>
                <td>
                    <TradeButton disabled />
                </td>
            </tr>
            <TradeTableGetStarted getStartedSteps={getStartedSteps} />
        </React.Fragment>
    )
}

export default TradeBondsTableRowPlaceholder