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

import ChangePill from 'react-uikit/change-pill'

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

const ColumnChange = ({
    align,
    className,
    currency,
    decimal = 2,
    isPercentFocus = false,
    tag: Tag,
    value,
    percent,
}) => {
    const percentDisplay = `${percent.toFixed(2)}%`
    const valueDisplay = renderWithCurrency(value, currency, {
        decimal,
        largeNumber: true,
    })
    const rootClassNames = bem.classNames(
        'c-column-change',
        {[align]: true},
        className
    )
    const mainClassNames = bem.classNames('c-column-change__main')
    const secondaryClassNames = bem.classNames(
        'c-column-change__secondary--number'
    )

    return (
        <Tag className={rootClassNames}>
            <span className={secondaryClassNames}>
                {isPercentFocus ? valueDisplay : percentDisplay}
            </span>
            <br />
            <ChangePill
                className={mainClassNames}
                size="medium"
                value={isPercentFocus ? percentDisplay : valueDisplay}
                isPositive={value === 0 ? undefined : value > 0}
            />
        </Tag>
    )
}

ColumnChange.propTypes = {
    align: PropTypes.string,
    className: PropTypes.string,
    currency: PropTypes.string,
    decimal: PropTypes.number,
    isPercentFocus: PropTypes.bool,
    percent: PropTypes.number,
    tag: PropTypes.string,
    value: PropTypes.number,
}

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

export default React.memo(ColumnChange)