import React from 'react'
import PropTypes from 'prop-types'
import securityTypes from 'common-fe/constants/security-types'
import ChangePill from 'react-uikit/change-pill'
import AskBid from 'components/ask-bid'

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

const OrderSecurityValue = ({
    className,
    security: {
        askPrice,
        bidPrice,
        change: {value, valueDisplay, percentageDisplay},
        updatedAt,
    },
}) => {
    const rootClassNames = bem.classNames('c-order-security-value', className)
    const askBidClassNames = bem.classNames('c-order-security-value__ask-bid')
    const dateClassNames = bem.classNames('c-order-security-value__date')

    const changeDisplay = `${valueDisplay} (${percentageDisplay})`

    return (
        <section className={rootClassNames} key="security-value">
            <ChangePill
                isPositive={value === 0 ? undefined : value > 0}
                value={changeDisplay}
                size="large"
            />
            <AskBid
                className={askBidClassNames}
                askPrice={askPrice}
                bidPrice={bidPrice}
            />
            <p className={dateClassNames}>{updatedAt}</p>
        </section>
    )
}

OrderSecurityValue.propTypes = {
    className: PropTypes.string,
    security: PropTypes.shape({
        askPrice: PropTypes.string, // $345.67'
        bidPrice: PropTypes.string, // '$248.90'
        change: PropTypes.shape({
            value: PropTypes.number, // 4.09
            percentage: PropTypes.numeber, // 2.43
            percentageDisplay: PropTypes.string, // '2.43%'
            valueDisplay: PropTypes.string, // '$2.43'
        }),
        updatedAt: PropTypes.string, // 'Sat. March 17, 2018 - 7:48 PM'
    }),
    securityType: PropTypes.oneOf(Object.keys(securityTypes)),
}

export default OrderSecurityValue