import React from 'react'
import PropTypes from 'prop-types'
import HeaderBarCloseButton from 'react-uikit/modal/partials/header-bar-close-button'
import PortfolioDescription from '../portfolio-description'
import BackToPortfolioAction from './partials/back-to-portfolio-action'

const PortfolioShowcaseDescription = ({
    isShowing,
    onDismiss,
    portfolio,
    returnToPortfolioOnDismiss,
    showPortfolioShowcase,
    user,
}) => {
    const dismiss = () => {
        onDismiss()

        returnToPortfolioOnDismiss &&
            showPortfolioShowcase({portfolioId: portfolio.id})
    }

    const ActionButton = returnToPortfolioOnDismiss
        ? (props) => <BackToPortfolioAction {...props} onClick={dismiss} /> // eslint-disable-line
        : HeaderBarCloseButton

    return (
        <PortfolioDescription
            isShowing={isShowing}
            portfolio={portfolio}
            renderActionButton={ActionButton}
            user={user}
            onDismiss={dismiss}
        />
    )
}

PortfolioShowcaseDescription.propTypes = {
    isShowing: PropTypes.bool,
    portfolio: PropTypes.shape({
        id: PropTypes.string,
    }),
    returnToPortfolioOnDismiss: PropTypes.bool,
    showPortfolioShowcase: PropTypes.func,
    user: PropTypes.object,
    onDismiss: PropTypes.func,
}

export default PortfolioShowcaseDescription