import React from 'react'
import PropTypes from 'prop-types'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
import securityTypes from 'common-fe/constants/security-types'
import ColumnChange from 'components/table-columns/change'
import ColumnLongShort from 'components/table-columns/long-short'
import ColumnNameIdentifier from 'components/table-columns/name-identifier'
import ColumnNumValue from 'components/table-columns/num-value'
import ColumnSecurityType from 'components/table-columns/security-type'

const bem = new BEMModule(styles)

const PortfolioHoldings = ({portfolio: {holdings}, limit}) => {
    const combinedHoldings = [
        ...holdings.bonds,
        ...holdings.cash,
        ...holdings.equities,
        ...holdings.funds,
        ...holdings.options,
    ]
    const numberOfHoldings = combinedHoldings.length
    const topHoldings = combinedHoldings
        .sort((a, b) => Math.abs(b.weight) - Math.abs(a.weight))
        .slice(0, limit)

    const rootClassNames = bem.classNames('c-certificate__user-profile')
    const tableClassNames = bem.classNames('c-certificate__user-profile__table')
    const theadClassNames = bem.classNames('c-certificate__user-profile__thead')
    const thClassNames = bem.classNames('c-certificate__user-profile__th')
    const dataClassNames = bem.classNames('c-certificate__user-profile__data')
    const emptyClassNames = bem.classNames('c-certificate__user-profile__empty')
    return (
        <div className={rootClassNames}>
            <table className={tableClassNames}>
                <thead className={theadClassNames}>
                    <tr>
                        <th className={thClassNames}>
                            {limit > numberOfHoldings
                                ? ``
                                : `${limit} largest holdings out of ${numberOfHoldings}`}
                        </th>
                        <th className={thClassNames}>Type</th>
                        <th className={thClassNames}>Exposure</th>
                        <th className={thClassNames}>Position</th>
                        <th className={thClassNames}>Profit / Loss</th>
                    </tr>
                </thead>
                <tbody>
                    {topHoldings.map((data, i) => (
                        <tr key={`${i}-${data.id}`} className={dataClassNames}>
                            <ColumnNameIdentifier
                                displayName={data.displayName}
                                identifier={data.ticker}
                            />
                            <ColumnSecurityType
                                securityType={data.type}
                                bondType={data.bondType}
                                align="center"
                            />
                            <ColumnNumValue
                                value={data.weightDisplay}
                                size="large"
                            />
                            <ColumnLongShort position={data.position} />
                            {data.type !== securityTypes.CASH.value ? (
                                <ColumnChange
                                    align="right"
                                    currency={data.currency}
                                    decimal={0}
                                    percent={data.profitLossPercent}
                                    value={data.profitLoss}
                                />
                            ) : (
                                <td className={emptyClassNames}>&nbsp;</td>
                            )}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    )
}

PortfolioHoldings.propTypes = {
    limit: PropTypes.number,
    portfolio: PropTypes.object,
}

PortfolioHoldings.defaultProps = {
    limit: 15,
}

export default PortfolioHoldings