import React from 'react'
import PropTypes from 'prop-types'
import BEMModule from 'utils/bem'
import styles from '../../styles.scss'
const bem = new BEMModule(styles)

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

export const RowAnnual = ({item}) => {
    const trClassNames = bem.classNames('c-company-financials__td')
    return (
        <tr className={trClassNames}>
            {Object.keys(item)
                .reverse()
                // No label means extraneous data, hence shouldn't be displayed
                .map((key) => item.label && <td key={key}>{item[key]}</td>)}
        </tr>
    )
}
RowAnnual.propTypes = {
    item: PropTypes.object,
}

export const RowQuarter = ({item: {label, value, yoy = {}}}) => {
    const trClassNames = bem.classNames('c-company-financials__td')
    const yoyClassNames = bem.classNames('c-company-financials__td--yoy')
    return (
        <tr className={trClassNames}>
            <td>{label}</td>
            <td>{value}</td>
            <td className={yoyClassNames}>
                <ChangePill
                    isPositive={
                        typeof yoy.percent === 'number' && yoy.percent !== 0
                            ? yoy.percent > 0
                            : undefined
                    }
                    value={
                        typeof yoy.percent === 'number'
                            ? `${yoy.percent.toFixed(2)}%`
                            : '- -'
                    }
                />
            </td>
        </tr>
    )
}

RowQuarter.propTypes = {
    item: PropTypes.object,
}