import React from 'react'
import PropTypes from 'prop-types'

import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)
import {
    renderCash,
    renderLargeNumber,
    renderWithCurrency,
} from 'common-fe/utils/render'

const ColumnMarketValue = ({
    align,
    className,
    currency,
    lotSize,
    price,
    quantity,
    tag: Tag,
    value,
}) => {
    let numLabel
    if (value) {
        if (currency) {
            numLabel = renderCash(value, {
                decimal: 0,
                largeNumber: true,
            })
        } else {
            numLabel = renderLargeNumber(value)
        }
    }
    const currencyLabel = currency ? ` ${currency}` : ``

    const currentPriceDisplay = renderWithCurrency(price, currency, {
        largeNumber: true,
    })
    const lotSizeDisplay = lotSize ? ` x ${renderLargeNumber(lotSize)}` : ''
    const quantityDisplay = renderLargeNumber(quantity)
    const rootClassNames = bem.classNames(
        'c-column-market-value',
        {[align]: true},
        className
    )
    const mainClassNames = bem.classNames('c-column-market-value__main')
    const secondaryClassNames = bem.classNames(
        'c-column-market-value__secondary--number'
    )
    const currencyClassNames = bem.classNames('c-column-market-value__currency')

    return (
        <Tag className={rootClassNames}>
            <span className={secondaryClassNames}>
                {currentPriceDisplay}
                {lotSizeDisplay} × {quantityDisplay}
            </span>
            <br />
            <span className={mainClassNames}>
                {numLabel}
                {currency && (
                    <span className={currencyClassNames}>{currencyLabel}</span>
                )}
            </span>
        </Tag>
    )
}

ColumnMarketValue.propTypes = {
    align: PropTypes.string,
    className: PropTypes.string,
    currency: PropTypes.string,
    decimal: PropTypes.number,
    lotSize: PropTypes.number,
    price: PropTypes.number,
    quantity: PropTypes.number,
    tag: PropTypes.string,
    value: PropTypes.number,
}

ColumnMarketValue.defaultProps = {
    align: 'right',
    tag: 'td',
}

export default React.memo(ColumnMarketValue)