import React from 'react'
import PropTypes from 'prop-types'
import {
    renderLargeNumber,
    renderWithCurrency,
    renderPercentDisplay,
} from 'common-fe/utils/render'

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

const ColumnNumValue = ({
    align,
    children,
    className,
    currency,
    defaultDisplayText = `--`,
    grade,
    isCurrency,
    isPercentage,
    label,
    precision,
    size,
    tag: Tag,
    value,
}) => {
    let valueDisplay = defaultDisplayText

    if (value) {
        valueDisplay = value

        if (isCurrency && currency) {
            valueDisplay = renderWithCurrency(value, currency, {
                largeNumber: true,
            })
        } else if (isCurrency) {
            valueDisplay = renderLargeNumber(value)
        } else if (isPercentage) {
            valueDisplay = `${renderPercentDisplay(
                value * 100,
                (precision = 2)
            )}%`
        }

        if (precision) {
            const _display = Number(value)
            if (!isNaN(_display)) {
                valueDisplay = _display.toFixed(precision)
            }
        }
    }

    const rootClasses = bem.classNames(
        'c-column-num-value',
        {[align]: true},
        {[grade]: true},
        {[size]: true},
        className
    )
    const currencyClasses = bem.classNames('c-column-num-value__currency')
    const labelClasses = bem.classNames('c-column-num-value__label')

    return (
        <Tag className={rootClasses}>
            {label && (
                <>
                    <span className={labelClasses}>{label}</span>
                    <br />
                </>
            )}
            {valueDisplay}
            {currency && (
                <span className={currencyClasses}>&ensp;{currency}</span>
            )}
            {children}
        </Tag>
    )
}

ColumnNumValue.propTypes = {
    align: PropTypes.oneOf(['left', 'center', 'right']),
    children: PropTypes.node,
    className: PropTypes.string,
    currency: PropTypes.string,
    defaultDisplayText: PropTypes.string,
    grade: PropTypes.oneOf([0, 1, 2, 3]),
    isCurrency: PropTypes.bool,
    isPercentage: PropTypes.bool,
    label: PropTypes.string,
    precision: PropTypes.number,
    size: PropTypes.oneOf(['large', 'medium', 'small']),
    tag: PropTypes.string,
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
}

ColumnNumValue.defaultProps = {
    align: 'right',
    size: 'small',
    tag: 'td',
}

export default React.memo(ColumnNumValue)