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

import Avatar from 'react-uikit/avatar'
import TeamManagementButton from '../button'

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

const TeamManagementRow = ({
    addUser,
    avatarUrl,
    email,
    firstName,
    id,
    currentUserId,
    lastName,
    removeUser,
    toAdd,
    toRemove,
    userIds,
}) => {
    const isCurrentUser = currentUserId === id
    const displayInvite = !isCurrentUser && toAdd
    const displayRevokeAccess = !isCurrentUser && toRemove
    const inviteDisabled = userIds.includes(id)

    const rowClasses = bem.classNames('c-team-management-modal__row')
    const userInfoClasses = bem.classNames('c-team-management-modal__user-info')
    const nameClasses = bem.classNames('c-team-management-modal__name')
    const emailClasses = bem.classNames('c-team-management-modal__email')
    const revokeClasses = bem.classNames('c-team-management-modal__button', {
        danger: true,
    })
    const inviteClasses = bem.classNames('c-team-management-modal__button', {
        action: true,
        disabled: inviteDisabled,
    })

    return (
        <div className={rowClasses}>
            <Avatar
                size="small"
                firstName={firstName}
                lastName={lastName}
                avatarUrl={avatarUrl}
            />
            <div className={userInfoClasses}>
                <h6 className={nameClasses}>
                    {firstName} {lastName}
                </h6>
                <p className={emailClasses}>{email}</p>
            </div>
            {displayRevokeAccess && (
                <TeamManagementButton
                    id={id}
                    className={revokeClasses}
                    onClick={removeUser}
                    userIds={userIds}
                >
                    Revoke access
                </TeamManagementButton>
            )}
            {displayInvite && (
                <TeamManagementButton
                    id={id}
                    className={inviteClasses}
                    onClick={addUser}
                    userIds={userIds}
                    disabled={inviteDisabled}
                    reason="Already added"
                >
                    {inviteDisabled ? 'Already added' : 'Invite'}
                </TeamManagementButton>
            )}
        </div>
    )
}

TeamManagementRow.propTypes = {
    addUser: PropTypes.func,
    avatarUrl: PropTypes.string,
    className: PropTypes.string,
    currentUserId: PropTypes.string,
    email: PropTypes.string,
    firstName: PropTypes.string,
    id: PropTypes.string,
    lastName: PropTypes.string,
    removeUser: PropTypes.func,
    toAdd: PropTypes.bool,
    toRemove: PropTypes.bool,
    userIds: PropTypes.array,
}
export default TeamManagementRow