import React from 'react'
import PropTypes from 'prop-types'
import Avatar from 'react-uikit/avatar'
import Modal from 'react-uikit/modal'
import HeaderBarCloseButton from 'react-uikit/modal/partials/header-bar-close-button'
import investmentApproaches from 'common-fe/constants/investment-approaches'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

const PortfolioDescription = ({
    isShowing,
    portfolio,
    renderActionButton: ActionButton,
    user,
    onDismiss,
}) => {
    const {description, investmentApproach, name: portfolioName} = portfolio
    const {avatarUrl, firstName, lastName} = user
    const classes = bem.classNames('c-portfolio-description')
    const headerClasses = bem.classNames('c-portfolio-description__header')
    const bodyClasses = bem.classNames('c-portfolio-description__body')
    const nameClasses = bem.classNames('c-portfolio-description__name')
    const portfolioNameClasses = bem.classNames(
        'c-portfolio-description__portfolio-name'
    )
    const userNameClasses = bem.classNames('c-portfolio-description__user-name')
    const approachClasses = bem.classNames('c-portfolio-description__approach')
    const approachLabel =
        investmentApproaches[investmentApproach]?.label ||
        investmentApproaches.NONE.label
    const portfolioDescription = description || 'No description has been added.'

    return (
        <Modal isShowing={isShowing} size="medium" onDismiss={onDismiss}>
            <Modal.HeaderBar
                title="Portfolio Description"
                renderActionButton={ActionButton}
            />

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

                <section className={bodyClasses}>
                    <span className={approachClasses}>{approachLabel}</span>
                    <p>{portfolioDescription}</p>
                </section>
            </div>
        </Modal>
    )
}

PortfolioDescription.propTypes = {
    description: PropTypes.string,
    isShowing: PropTypes.bool,
    portfolio: PropTypes.shape({
        description: PropTypes.string,
        investmentApproach: PropTypes.string,
        name: PropTypes.string,
    }),
    renderActionButton: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
    user: PropTypes.shape({
        avatarUrl: PropTypes.string,
        firstName: PropTypes.string,
        lastName: PropTypes.string,
    }),
    onDismiss: PropTypes.func,
}

PortfolioDescription.defaultProps = {
    renderActionButton: HeaderBarCloseButton,
}

export default PortfolioDescription