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)

const PortfolioValue = ({
    change,
    changeClassName,
    className,
    holdingsDatetime,
    isArchived,
    isDark,
    valueClassName,
    value,
}) => {
    const noChange = change.percent === 0
    const isPositive = change.percent > 0
    const isNegative = change.percent < 0

    const rootClassNames = bem.classNames('c-portfolio-value', className)
    const valueClassNames = bem.classNames(
        'c-portfolio-value__value',
        valueClassName
    )
    const noticeClasses = bem.classNames('c-portfolio-value__notice', {
        dark: isDark,
    })
    const changeClassNames = bem.classNames(
        'c-portfolio-value__change',
        changeClassName,
        {
            dark: isDark,
            positive: !noChange && isPositive,
            negative: !noChange && isNegative,
        }
    )

    return (
        <div className={rootClassNames}>
            <h2 className={valueClassNames}>{value}</h2>
            {isArchived ? (
                <p className={noticeClasses}>
                    NOTE: This portfolio is no longer active.
                    <br />
                    All values are as of <b>{holdingsDatetime}</b>
                </p>
            ) : (
                <p className={changeClassNames}>
                    <span>Today&emsp;</span>
                    <ChangePill
                        isPositive={noChange ? undefined : isPositive}
                        value={`${change.value} (${change.percentDisplay}%)`}
                        size="large"
                    />
                </p>
            )}
        </div>
    )
}

PortfolioValue.propTypes = {
    change: PropTypes.shape({
        value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
        percent: PropTypes.number,
        percentDisplay: PropTypes.string,
    }),
    changeClassName: PropTypes.string,
    className: PropTypes.string,
    holdingsDatetime: PropTypes.string,
    isArchived: PropTypes.bool,
    isDark: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'large']),
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    valueClassName: PropTypes.string,
}

PortfolioValue.defaultProps = {
    change: {
        value: 0,
        percent: 0,
    },
    isDark: true,
    value: 0,
}

export default PortfolioValue