import React, {useCallback, useMemo} from 'react'
import PropTypes from 'prop-types'
import {getSharpeRatioGrade, getDiversificationGrade} from 'utils/metrics'
import {history} from 'router/history'
import {makeMenuItems} from 'components/portfolio-page-nav/helpers'
import routes from 'global/constants/routes'

import Avatar from 'react-uikit/avatar'
import ColumnNumValue from 'components/table-columns/num-value'
import DropMenu from 'components/drop-menu'
import Icon from 'react-uikit/icon'
import SettingsToggle from 'components/page-nav/partials/settings-toggle'

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

const PortfoliosTableRow = ({
    activity,
    className,
    course,
    diversification,
    isArchived,
    portfolio,
    sharpeRatio,
    users,
    value,
}) => {
    // Avatar
    const hasManyManagers = users?.length > 1
    const avatarUrl = hasManyManagers ? null : users[0].avatarUrl
    const firstNameDisplay = hasManyManagers
        ? `${users.length}`
        : users[0].firstName
    const lastNameDisplay = hasManyManagers ? '' : users[0].lastName
    const indexDisplay = hasManyManagers ? users.length : null
    const handleClick = () => {}

    // Portfolio & Challenge
    const navigateToPortfolio = () =>
        useCallback(() => history.push(`${routes.PORTFOLIO}/${portfolio.id}`), [
            portfolio.id,
        ])

    const navigateToChallenge = () =>
        useCallback(() => history.push(`${routes.COURSE}/${course.id}`), [
            course.id,
        ])

    // Activity
    const hasPendingTrades = activity && activity !== 0

    // Grades
    const diversificationGrade = getDiversificationGrade({diversification})
    const sharpeRatioGrade = getSharpeRatioGrade({sharpeRatio})

    // Settings
    const menuItems = useMemo(
        () =>
            makeMenuItems({
                course,
                users,
                showPortfolioDeleteConfirmation: () => {},
                showPortfolioSettings: () => {},
                showPortfolioLeaveConfirmation: () => {},
                showTeamManagement: () => {},
            }),
        [portfolio.id, course.id]
    )

    // Styles
    const rowClasses = bem.classNames(
        'c-portfolios-table__row',
        {isArchived},
        className
    )
    const pendingTradesClasses = bem.classNames(
        'c-portfolios-table__pending-trades'
    )
    const portfolioClasses = bem.classNames('c-portfolios-table__portfolio')
    const portfolioNameClasses = bem.classNames(
        'c-portfolios-table__portfolio-name'
    )
    const portfolioChallengeClasses = bem.classNames(
        'c-portfolios-table__portfolio-challenge'
    )
    const avatarClasses = bem.classNames('c-portfolios-table__avatar', {
        multiple: hasManyManagers,
    })
    const avatarButtonClasses = bem.classNames(
        'c-portfolios-table__avatar-button',
        {multiple: hasManyManagers}
    )
    const archivedLabelClasses = bem.classNames(
        'c-portfolios-table__archived-label'
    )
    const dropMenuClassNames = bem.classNames('c-portfolios-table__drop-menu')

    return (
        <tr className={rowClasses}>
            <td>
                <div className={portfolioClasses}>
                    <div>
                        <button
                            className={avatarButtonClasses}
                            disabled={!hasManyManagers}
                            onClick={handleClick}
                        >
                            <Avatar
                                avatarUrl={avatarUrl}
                                className={avatarClasses}
                                firstName={firstNameDisplay}
                                index={indexDisplay}
                                lastName={lastNameDisplay}
                                size="small"
                            />
                        </button>
                    </div>
                    <div>
                        <button
                            className={portfolioNameClasses}
                            role="link"
                            onClick={navigateToPortfolio}
                        >
                            {portfolio.name}
                            {isArchived && (
                                <span className={archivedLabelClasses}>
                                    &ensp;ARCHIVED
                                </span>
                            )}
                        </button>
                        {course.id && (
                            <button
                                className={portfolioChallengeClasses}
                                role="link"
                                onClick={navigateToChallenge}
                            >
                                <Icon name="participants" />
                                {course.name}
                            </button>
                        )}
                    </div>
                </div>
            </td>
            <ColumnNumValue
                grade={isArchived ? null : diversificationGrade.grade}
                label={diversificationGrade.label}
                value={diversification}
                size="large"
                isPercentage
                precision={0}
            />
            <ColumnNumValue
                grade={isArchived ? null : sharpeRatioGrade.grade}
                label={sharpeRatioGrade.label}
                value={sharpeRatio}
                size="large"
                precision={2}
            />
            <ColumnNumValue
                grade={hasPendingTrades ? 3 : null}
                value={hasPendingTrades ? activity : null}
                size="large"
            >
                {hasPendingTrades ? (
                    <span className={pendingTradesClasses}>&nbsp;</span>
                ) : (
                    ''
                )}
            </ColumnNumValue>
            <ColumnNumValue
                value={value}
                size="medium"
                currency="USD"
                isCurrency
            />
            <td>
                <DropMenu
                    className={dropMenuClassNames}
                    menuItems={menuItems}
                    renderToggle={SettingsToggle}
                />
            </td>
        </tr>
    )
}

PortfoliosTableRow.propTypes = {
    activity: PropTypes.number,
    className: PropTypes.string,
    course: PropTypes.object,
    diversification: PropTypes.number,
    isArchived: PropTypes.bool,
    list: PropTypes.array,
    portfolio: PropTypes.object,
    sharpeRatio: PropTypes.number,
    users: PropTypes.array,
    value: PropTypes.number,
}

export default PortfoliosTableRow