import React, {useCallback, useMemo} from 'react'
import PropTypes from 'prop-types'
import Avatar from 'react-uikit/avatar'
import Modal from 'react-uikit/modal'
import styles from './styles.scss'
import BEMModule from 'utils/bem'
import engagementRequirements from 'global/constants/engagement-requirements'
import {getEngagementScore} from 'utils/portfolio'
const bem = new BEMModule(styles)

const LABEL_MAP = Object.values(engagementRequirements).reduce(
    (map, {value, label}) => {
        map[value] = label
        return map
    },
    {}
)

const CourseScoreBreakdown = ({
    engagement: engagementScore,
    isShowing,
    metrics: {engagement},
    portfolio,
    user,
    onDismiss,
}) => {
    const {courseSection: course, name: portfolioName} = portfolio || {}
    const {avatarUrl, firstName, lastName} = user

    const {breakdown} = useMemo(
        () => getEngagementScore({goals: course, results: engagement}),
        [course, engagement]
    )

    const getScoreClass = useCallback(
        (score) =>
            bem.classNames('c-course-score-breakdown__score', {
                bad: score < 0.5,
                good: score > 0.85,
            }),
        []
    )

    const classes = bem.classNames('c-course-score-breakdown')
    const headerClasses = bem.classNames('c-course-score-breakdown__header')
    const bodyClasses = bem.classNames('c-course-score-breakdown__body')
    const nameClasses = bem.classNames('c-course-score-breakdown__name')
    const portfolioNameClasses = bem.classNames(
        'c-course-score-breakdown__portfolio-name'
    )
    const userNameClasses = bem.classNames(
        'c-course-score-breakdown__user-name'
    )
    const breakdownListClasses = bem.classNames(
        'c-course-score-breakdown__breakdown-list'
    )
    const breakdownItemClasses = bem.classNames(
        'c-course-score-breakdown__breakdown'
    )
    const totalScoreClasses = bem.classNames(
        'c-course-score-breakdown__total-score'
    )

    return (
        <Modal isShowing={isShowing} size="medium" onDismiss={onDismiss}>
            <Modal.HeaderBar title="Score Breakdown" />

            <div className={classes}>
                <section className={headerClasses}>
                    <Avatar
                        avatarUrl={avatarUrl}
                        firstName={firstName}
                        lastName={lastName}
                    />
                    <div className={nameClasses}>
                        <h1 className={portfolioNameClasses}>
                            {portfolioName}
                        </h1>
                        <span
                            className={userNameClasses}
                        >{`${firstName} ${lastName}`}</span>
                    </div>
                </section>

                <section className={bodyClasses}>
                    <ul className={breakdownListClasses}>
                        {Object.entries(breakdown).map(
                            ([key, {score: calculatedScore, goal}], i) => {
                                const cashPercentage =
                                    engagementRequirements.MAX_CASH_PERCENTAGE
                                        .value
                                const isCashPercentageScore =
                                    key === cashPercentage
                                let score = isCashPercentageScore
                                    ? (1 - engagement?.[cashPercentage]) * 100
                                    : calculatedScore
                                score = isCashPercentageScore
                                    ? score.toFixed()
                                    : score
                                return (
                                    goal && (
                                        <li
                                            className={breakdownItemClasses}
                                            key={`break-down-${i}`}
                                        >
                                            <span>{LABEL_MAP[key]}</span>
                                            <span>
                                                <span
                                                    className={getScoreClass(
                                                        score / goal
                                                    )}
                                                >
                                                    {score}
                                                </span>
                                                &nbsp;/&nbsp;
                                                {goal}
                                            </span>
                                        </li>
                                    )
                                )
                            }
                        )}

                        <li className={totalScoreClasses}>
                            <span>Total Score</span>
                            <span>{engagementScore?.scoreDisplay}</span>
                        </li>
                    </ul>
                </section>
            </div>
        </Modal>
    )
}

CourseScoreBreakdown.propTypes = {
    engagement: PropTypes.object,
    isShowing: PropTypes.bool,
    metrics: PropTypes.object,
    portfolio: PropTypes.shape({
        name: PropTypes.string,
        metrics: PropTypes.shape({
            engagement: PropTypes.object,
        }),
    }),
    user: PropTypes.shape({
        avatarUrl: PropTypes.string,
        firstName: PropTypes.string,
        lastName: PropTypes.string,
    }),
    onDismiss: PropTypes.func,
}

export default CourseScoreBreakdown