import React from 'react'
import PropTypes from 'prop-types'

import List from './partials/list'
import Category from './partials/category'
import Icon from 'react-uikit/icon'

import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

const PortfoliosTable = ({
    className,
    portfoliosData,
    diversificationData,
    valueData,
    sharpeRatioData,
    activityData,
}) => {
    const rootClasses = bem.classNames('c-portfolios-table', className)
    const headClasses = bem.classNames('c-portfolios-table__head')
    const sortIconClasses = bem.classNames('c-portfolios-table__sort-icon')

    return (
        <table className={rootClasses}>
            <thead className={headClasses}>
                <tr>
                    <th>Portfolio</th>
                    <th>
                        Diversification{' '}
                        <Icon className={sortIconClasses} name="sort" />
                    </th>
                    <th>
                        Sharpe Ratio
                        <Icon className={sortIconClasses} name="sort" />
                    </th>
                    <th>
                        Pending Trades
                        <Icon className={sortIconClasses} name="sort" />
                    </th>
                    <th>
                        Value
                        <Icon className={sortIconClasses} name="sort" />
                    </th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            {Object.values(portfoliosData).map(({title = '', list = []}) => (
                <React.Fragment key={title}>
                    <Category title={title} />
                    <List
                        list={list}
                        diversification={diversificationData}
                        sharpeRatio={sharpeRatioData}
                        value={valueData}
                        activity={activityData}
                    />
                </React.Fragment>
            ))}
        </table>
    )
}

PortfoliosTable.propTypes = {
    activityData: PropTypes.object,
    className: PropTypes.string,
    diversificationData: PropTypes.object,
    portfoliosData: PropTypes.object,
    sharpeRatioData: PropTypes.object,
    valueData: PropTypes.object,
}

export default PortfoliosTable