import React from 'react'
import PropTypes from 'prop-types'
import BEMModule from 'utils/bem'
import Badges from 'global/constants/badges'

import Button from 'react-uikit/button'
import Badge from 'components/badge'

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

const InvestorProfileTemplate = ({portfolio}) => {
    console.log(portfolio)
    const classes = bem.classNames('c-investor-profile-template')
    const descriptionWrapperClasses = bem.classNames(
        'c-investor-profile-template__description-wrapper'
    )
    const dataWrapperClasses = bem.classNames(
        'c-investor-profile-template__data-wrapper'
    )
    const descriptionClasses = bem.classNames(
        'c-investor-profile-template__description'
    )
    const userNameClasses = bem.classNames(
        'c-investor-profile-template__user-name'
    )
    const badgeTrayClasses = bem.classNames(
        'c-investor-profile-template__badge-tray'
    )
    const horizontalLineClasses = bem.classNames(
        'c-investor-profile-template__horizontal-line'
    )
    const linkTrayClasses = bem.classNames(
        'c-investor-profile-template__link-tray'
    )
    const buttonClasses = bem.classNames('c-investor-profile-template__button')
    const dataListClasses = bem.classNames(
        'c-investor-profile-template__data-list'
    )
    const dataItemClasses = bem.classNames(
        'c-investor-profile-template__data-item'
    )
    const achievementHeadingClasses = bem.classNames(
        'c-investor-profile-template__achievement-heading'
    )
    // const users = portfolio.users.map((user, index) =>
    //     <React.Fragment key={user.id}>
    //         <span>{`${user.firstName} ${user.lastName}`}</span>{ (portfolio.users.length !== index + 1) && (`,`<br />)}
    //     </React.Fragment>
    // )
    const users = []

    return (
        <div className={classes}>
            <div className={descriptionWrapperClasses}>
                <h1 className={userNameClasses}>{users}</h1>
                <p>on EquitySim since Oct. 23, 2019</p>
                <ul className={badgeTrayClasses}>
                    <li>
                        <Badge badge={Badges.PERFORMER} />
                    </li>
                    <li>
                        <Badge badge={Badges.LEARNER} />
                    </li>
                    <li>
                        <Badge badge={Badges.PORTFOLIO_MANAGER} />
                    </li>
                </ul>
                <p className={descriptionClasses}>
                    Mei-Ling Chen has earned three (3) badges in competitions on
                    EquitySim. Mei-Ling Chen has demonstratedan interest in
                    learning about the Financial markets, a basic knowledge of
                    portfolio management skills and an ability to evaluate risk
                    and return tradeoffs, and generate consistent profits over a
                    set period of time.
                </p>
                <hr className={horizontalLineClasses} />
                <div className={linkTrayClasses}>
                    <Button className={buttonClasses}>Resume</Button>
                    <Button className={buttonClasses}>LinkedIn</Button>
                    <Button className={buttonClasses}>Twitter</Button>
                </div>
                <p>No bio yet...</p>
            </div>
            <div className={dataWrapperClasses}>
                <h2 className={achievementHeadingClasses}>Achievements</h2>
                <ul className={dataListClasses}>
                    <li className={dataItemClasses}>
                        <span>Portfolios managed</span>
                        <span>2</span>
                    </li>
                    <li className={dataItemClasses}>
                        <span>Total trades</span>
                        <span>107</span>
                    </li>
                    <li className={dataItemClasses}>
                        <span>Top total return</span>
                        <span>9.23%</span>
                    </li>
                    <li className={dataItemClasses}>
                        <span>Top Sharpe Ratio</span>
                        <span>1.12</span>
                    </li>
                    <li className={dataItemClasses}>
                        <span>Trade rationales written</span>
                        <span>56</span>
                    </li>
                </ul>
            </div>
        </div>
    )
}

InvestorProfileTemplate.propTypes = {
    portfolio: PropTypes.object,
}

export default InvestorProfileTemplate