import React 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'
const bem = new BEMModule(styles)

const CourseManagersInfo = ({isShowing, portfolio, users, onDismiss}) => {
    const hasManyManagers = users?.length > 1
    const plurality = hasManyManagers ? 's' : ''

    const classes = bem.classNames('c-course-managers-info')
    const portfolioNameClasses = bem.classNames(
        'c-course-managers-info__portfolio-name'
    )
    const userNameClasses = bem.classNames('c-course-managers-info__user-name')
    const managersListClasses = bem.classNames(
        'c-course-managers-info__managers-list'
    )

    return (
        <Modal isShowing={isShowing} size="medium" onDismiss={onDismiss}>
            <Modal.HeaderBar title={`Portfolio Manager${plurality}`} />

            <div className={classes}>
                <h1 className={portfolioNameClasses}>
                    {portfolio?.name} Manager{plurality}
                </h1>

                <ul className={managersListClasses}>
                    {users.map(({avatarUrl, firstName, id, lastName}) => {
                        return (
                            <li key={id}>
                                <Avatar
                                    avatarUrl={avatarUrl}
                                    firstName={firstName}
                                    lastName={lastName}
                                    size="small"
                                />
                                <h2
                                    className={userNameClasses}
                                    style={{display: 'inline-block'}}
                                >
                                    {firstName} {lastName}
                                </h2>
                            </li>
                        )
                    })}
                </ul>
            </div>
        </Modal>
    )
}

CourseManagersInfo.propTypes = {
    engagement: PropTypes.object,
    isShowing: PropTypes.bool,
    portfolio: PropTypes.shape({
        name: PropTypes.string,
    }),
    users: PropTypes.arrayOf(
        PropTypes.shape({
            avatarUrl: PropTypes.string,
            firstName: PropTypes.string,
            id: PropTypes.string,
            lastName: PropTypes.string,
        })
    ),
    onDismiss: PropTypes.func,
}

export default CourseManagersInfo