import React from 'react'
import PropTypes from 'prop-types'
import {
    renderLargeNumber,
    renderShortNumber,
    renderWithCurrency,
} from 'common-fe/utils/render'
import BEMModule from 'utils/bem'
import {getDiversificationImpact, getExposureImpact} from 'utils/portfolio'

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

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

const PercentMetric = ({className, value}) => {
    return typeof value === 'undefined' || isNaN(value) ? (
        <span className={className}>- -</span>
    ) : (
        <ChangePill
            className={className}
            isPositive={!(value < 0)}
            value={`${renderShortNumber(value, {decimal: 2})}%`}
            size="small"
        />
    )
}

PercentMetric.propTypes = {
    className: PropTypes.string,
    value: PropTypes.number,
}

const ActivityDetails = ({
    currency,
    diversification = [],
    exposure = [],
    orderType,
    price,
    quantity = 0,
    rationale,
    tradeAction,
}) => {
    const {
        assetClassScore,
        diversificationScore,
        regionScore,
        sectorScore,
        totalScore,
    } = getDiversificationImpact(diversification)
    const {exposureScore, exposureChange} = getExposureImpact(exposure)
    const orderQuantity = price && quantity ? price / quantity : 0

    const classes = bem.classNames('c-activity-details')
    const diversificationClasses = bem.classNames(
        'c-activity-details__diversification'
    )
    const changeValueClasses = bem.classNames(
        'c-activity-details__change-value'
    )
    const orderClasses = bem.classNames('c-activity-details__order')
    const orderDetailsClasses = bem.classNames(
        'c-activity-details__order-details'
    )
    const subtextClasses = bem.classNames('c-activity-details__subtext')
    const rationaleClasses = bem.classNames('c-activity-details__rationale')
    const breakdownTitleClasses = bem.classNames(
        'c-activity-details__breakdown-title'
    )

    return (
        <div className={classes}>
            <div className={orderClasses}>
                <p className={orderDetailsClasses}>
                    <span style={{textTransform: 'capitalize'}}>
                        {tradeAction?.toLowerCase()}{' '}
                        <span className={subtextClasses}>|</span>{' '}
                        {orderType?.toLowerCase()}
                    </span>
                    <span>
                        {renderWithCurrency(orderQuantity, currency, {
                            largeNumber: true,
                        })}{' '}
                        × {renderLargeNumber(quantity)}{' '}
                        <span className={subtextClasses}>shares</span>
                    </span>
                </p>
                <p className={rationaleClasses}>
                    {rationale?.summary
                        ? rationale.summary
                        : '(no written rationale)'}
                </p>
            </div>

            <div className={diversificationClasses}>
                <dl>
                    <dt>Diversification</dt>
                    <dd>
                        <span>
                            {typeof diversificationScore === 'undefined' ||
                            diversificationScore === null
                                ? '- -'
                                : diversificationScore.toFixed(2)}
                        </span>
                        {Boolean(totalScore) && (
                            <PercentMetric value={totalScore} />
                        )}
                    </dd>

                    <dt>Exposure</dt>
                    <dd>
                        <span>
                            {typeof exposureScore === 'undefined'
                                ? '- -'
                                : `${exposureScore.toFixed(2)}%`}
                        </span>
                        {Boolean(exposureChange) && (
                            <PercentMetric value={exposureChange} />
                        )}
                    </dd>
                </dl>
                <ul>
                    <li className={breakdownTitleClasses}>
                        Diversification Breakdown
                    </li>
                    <li>
                        <span>Asset Class</span>
                        <PercentMetric
                            className={changeValueClasses}
                            value={assetClassScore}
                        />
                    </li>

                    <li>
                        <span>Industry</span>
                        <PercentMetric
                            className={changeValueClasses}
                            value={sectorScore}
                        />
                    </li>

                    <li>
                        <span>Region</span>
                        <PercentMetric
                            className={changeValueClasses}
                            value={regionScore}
                        />
                    </li>
                </ul>
            </div>
        </div>
    )
}

ActivityDetails.displayName = 'ActivityDetails'

ActivityDetails.propTypes = {
    currency: PropTypes.string,
    diversification: PropTypes.array,
    exposure: PropTypes.array,
    orderType: PropTypes.string,
    price: PropTypes.string,
    quantity: PropTypes.number,
    rationale: PropTypes.object,
    security: PropTypes.object,
    tradeAction: PropTypes.string,
}

export default ActivityDetails