import React, {useMemo} from 'react'
import PropTypes from 'prop-types'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
import Tag from 'react-uikit/tag'
import {constructInfo} from './content'
import BADGES, {getBadges} from 'global/constants/badges'

const bem = new BEMModule(styles)

const CompetitionBadges = ({portfolio, course, isComplete}) => {
    const {
        holdings,
        metrics: {engagement, sharpe: sharpeRatioMetrics},
        totalReturn,
        users = [{}],
    } = portfolio
    const {firstName, lastName} = users[0]
    const {totalTrades, cashPercentage} = engagement
    const {
        allTime: {value: sharpeRatio},
    } = sharpeRatioMetrics || {}
    const {amount: totalReturnValue} = totalReturn
    const {name: courseName} = course
    const {cash = [], count = {}} = holdings
    const holdingsCount = cash.length + count?.total

    const badges = useMemo(
        () =>
            getBadges({
                totalTrades,
                cashPercentage,
                holdingsCount,
                sharpeRatio,
                totalReturn: totalReturnValue,
            }),
        [
            totalTrades,
            cashPercentage,
            holdingsCount,
            sharpeRatio,
            totalReturnValue,
        ]
    )

    const info = useMemo(() => {
        return constructInfo({
            badges,
            courseName,
            firstName,
            lastName,
        })
    }, [
        courseName,
        firstName,
        lastName,
        totalTrades,
        cashPercentage,
        holdingsCount,
        sharpeRatio,
        totalReturn,
    ])

    const rootClassNames = bem.classNames('c-certificate__competition-badges')
    const tagClassNames = bem.classNames(
        'c-certificate__competition-badges__tag'
    )

    if (!isComplete && badges.length < 1) {
        return (
            <div className={rootClassNames}>
                <p>Build your portfolio strategy and earn badges!</p>
            </div>
        )
    }

    return (
        <div className={rootClassNames}>
            {badges.map((badge) => (
                <Tag key={BADGES[badge].value} className={tagClassNames}>
                    {BADGES[badge].label}
                </Tag>
            ))}
            <p>
                {isComplete
                    ? info
                    : 'You are on your way to earn these badges.'}
            </p>

            {/* TODO: Implement percentages on the BE */}
            {/* <p>
                <em>16%</em> of {courseName} participants has earned the Portfolio Manager badge, <em>24%</em> has earned the Performer badge.
            </p> */}
        </div>
    )
}

CompetitionBadges.propTypes = {
    course: PropTypes.object,
    isComplete: PropTypes.bool,
    portfolio: PropTypes.object,
}

export default CompetitionBadges