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

import Avatar from 'react-uikit/avatar'
import ChangePill from 'react-uikit/change-pill'
import Icon from 'react-uikit/icon'

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

const TableRowHeading = ({
    change,
    className,
    index,
    shouldDisplayPortfolioName,
    metricKey,
    open,
    portfolio,
    rank,
    users,
    onClick,
    ...rest
}) => {
    const {scoreDisplay} = rest[metricKey] || {}
    const disabled = !shouldDisplayPortfolioName
    const isEven = index % 2 === 0
    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 displayName =
        shouldDisplayPortfolioName || hasManyManagers
            ? portfolio.name
            : `${lastNameDisplay}, ${firstNameDisplay}`

    const handleClick = () => {
        if (shouldDisplayPortfolioName) {
            onClick?.({portfolio, users})
        }
    }

    const classes = bem.classNames(
        'c-table-row-heading',
        {
            even: isEven && !open,
            odd: !isEven && !open,
            'has-ranking': rank,
            open,
        },
        className
    )
    const changeClasses = bem.classNames('c-table-row-heading__change', {open})
    const rankClasses = bem.classNames('c-table-row-heading__rank', {open})
    const avatarClasses = bem.classNames('c-table-row-heading__avatar', {
        disabled,
        multiple: hasManyManagers,
        open,
    })
    const avatarButtonClasses = bem.classNames(
        'c-table-row-heading__avatar-button',
        {multiple: hasManyManagers, open}
    )
    const displayNameClasses = bem.classNames(
        'c-table-row-heading__display-name',
        {open}
    )
    const scoreClasses = bem.classNames('c-table-row-heading__score', {open})
    const toggleButtonClasses = bem.classNames(
        'c-table-row-heading__toggle-button',
        {open}
    )

    return (
        <div className={classes}>
            {change ? (
                <p className={changeClasses}>
                    <ChangePill />
                </p>
            ) : (
                <div />
            )}

            {rank ? <p className={rankClasses}>{rank}</p> : <div />}

            <div>
                <button
                    className={avatarButtonClasses}
                    disabled={disabled}
                    onClick={handleClick}
                >
                    <Avatar
                        avatarUrl={avatarUrl}
                        className={avatarClasses}
                        firstName={firstNameDisplay}
                        index={indexDisplay}
                        lastName={lastNameDisplay}
                        size="small"
                    />
                </button>

                <p className={displayNameClasses}>{displayName}</p>
            </div>

            <p className={scoreClasses}>{scoreDisplay}</p>

            <div>
                <Icon name="chevron-down" className={toggleButtonClasses} />
            </div>
        </div>
    )
}

TableRowHeading.propTypes = {
    change: PropTypes.number,
    className: PropTypes.string,
    index: PropTypes.number,
    metricKey: PropTypes.string,
    open: PropTypes.bool,
    portfolio: PropTypes.object,
    rank: PropTypes.number,
    scoreDisplay: PropTypes.string,
    shouldDisplayPortfolioName: PropTypes.bool,
    users: PropTypes.array,
    onClick: PropTypes.func,
}

export default TableRowHeading