import React from 'react'
import PropTypes from 'prop-types'
import ChangePill from 'react-uikit/change-pill'
import JumpToRank from 'components/jump-to-rank'
import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)

const ClassroomSharpeRatio = ({
    jumpToRank,
    rank,
    rankChange,
    sharpeRatioDisplay,
}) => {
    const hasRank = typeof rank === 'number'
    const rankDisplay = hasRank ? `${rank}` : '––'
    const noChange = rankChange === 0
    const isPositive = rankChange > 0

    const classes = bem.classNames('c-classroom-sharpe-ratio')
    const valueClasses = bem.classNames('c-classroom-sharpe-ratio__value')
    const rankClasses = bem.classNames('c-classroom-sharpe-ratio__rank')

    return (
        <div className={classes}>
            <h2 className={valueClasses}>{sharpeRatioDisplay}</h2>
            <p className={rankClasses}>
                <span>Today’s Rank</span>
                <ChangePill
                    isPositive={noChange ? undefined : isPositive}
                    value={rankChange}
                    size="large"
                />
                <span>&emsp;|&emsp;{rankDisplay}</span>
            </p>

            <JumpToRank hasRank={hasRank} onClick={jumpToRank} />
        </div>
    )
}

ClassroomSharpeRatio.propTypes = {
    jumpToRank: PropTypes.func,
    rank: PropTypes.number,
    rankChange: PropTypes.number,
    sharpeRatioDisplay: PropTypes.string,
}

ClassroomSharpeRatio.defaultProps = {
    rankChange: 1,
    rankDisplay: '1',
    sharpeRatioDisplay: '0.06',
}

export default ClassroomSharpeRatio