import React from 'react'
import PropTypes from 'prop-types'
import {renderWithCurrency} from 'common-fe/utils/render'
import moment from 'moment'
import orderActions from 'common-fe/constants/order-actions'
import orderStatuses from 'common-fe/constants/order-statuses'
import orderTypes from 'common-fe/constants/order-types'

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

const PortfolioActivityOrderInfo = ({
    expiration,
    currency,
    orderAction,
    orderType,
    limitPrice,
    status,
    stopPrice,
    updatedAt,
}) => {
    const rootClassNames = bem.classNames('c-portfolio-activity-order-info')
    const headingClassNames = bem.classNames(
        'c-portfolio-activity-order-info__heading'
    )
    const listClassNames = bem.classNames(
        'c-portfolio-activity-order-info__list'
    )
    const valueClassNames = bem.classNames(
        'c-portfolio-activity-order-info__value'
    )
    const numberClassNames = bem.classNames(
        'c-portfolio-activity-order-info__number'
    )
    const hrClassNames = bem.classNames('c-portfolio-activity-order-info__hr')

    const expirationDisplay = expiration
        ? moment(expiration).format('MMM Do, YYYY')
        : 'N/A'

    const updatedAtDisplay = updatedAt
        ? moment(updatedAt).format('MMM Do, YYYY')
        : 'N/A'

    const orderTypeDisplay = orderType
        ? (orderTypes[orderType] && orderTypes[orderType].label) || orderType
        : 'Market'

    const isPending = status === orderStatuses.PENDING.value
    const isMarket = !orderType || orderType === orderTypes.MARKET.value

    return (
        <div className={rootClassNames}>
            <h3 className={headingClassNames}>Order Summary</h3>
            <hr className={hrClassNames} />
            <dl className={listClassNames}>
                {isPending ? (
                    <React.Fragment>
                        <dt>Expires on</dt>
                        <dd className={valueClassNames}>
                            {isMarket ? '∞' : expirationDisplay}
                        </dd>
                    </React.Fragment>
                ) : (
                    <React.Fragment>
                        <dt>{orderStatuses[status].label} on</dt>
                        <dd className={valueClassNames}>{updatedAtDisplay}</dd>
                    </React.Fragment>
                )}
            </dl>
            <hr className={hrClassNames} />
            <dl className={listClassNames}>
                <dt>Action</dt>
                <dd className={valueClassNames}>
                    {orderActions[orderAction] &&
                        orderActions[orderAction].label}
                </dd>
                <dt>Type</dt>
                <dd className={valueClassNames}>{orderTypeDisplay}</dd>
                {typeof limitPrice === 'number' && (
                    <React.Fragment>
                        <dt>Limit Price</dt>
                        <dd className={numberClassNames}>
                            {renderWithCurrency(limitPrice, currency, {
                                largeNumber: true,
                            })}
                        </dd>
                    </React.Fragment>
                )}
                {typeof stopPrice === 'number' && (
                    <React.Fragment>
                        <dt>Stop Price</dt>
                        <dd className={numberClassNames}>
                            {renderWithCurrency(stopPrice, currency, {
                                largeNumber: true,
                            })}
                        </dd>
                    </React.Fragment>
                )}
            </dl>
        </div>
    )
}

PortfolioActivityOrderInfo.propTypes = {
    currency: PropTypes.string,
    expiration: PropTypes.string,
    limitPrice: PropTypes.number,
    orderAction: PropTypes.string,
    orderType: PropTypes.string,
    status: PropTypes.string,
    stopPrice: PropTypes.number,
    updatedAt: PropTypes.string,
}
export default PortfolioActivityOrderInfo