import React from 'react'
import PropTypes from 'prop-types'
import Button from 'react-uikit/button'
import CreatePortfolioThumbnail from 'components/create-portfolio-thumbnail'
import routes from 'constants/routes'
import {history} from 'router/history'
import {PORTFOLIO_COUNT_MAX, PORTFOLIO_COUNT_MAX_PREMIUM} from 'store/config'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
import PortfolioNavItem from '../item'

const bem = new BEMModule(styles)

const UpgradeMessage = ({isExistingPortfolio}) => {
    const messageContent = isExistingPortfolio
        ? `unlock this portfolio`
        : 'create up to 8\xa0portfolios'
    return (
        <p
            style={{
                backgroundColor: 'white',
                color: 'grey',
                padding: '1.6rem',
                position: 'absolute',
                width: '75%',
                borderRadius: '2px',
                zIndex: '100',
                margin: 0,
                textTransform: 'initial',
                lineHeight: 1.25,
                textAlign: 'center',
            }}
        >
            <a href={routes.PAYMENT}>Upgrade</a> your account to{' '}
            {messageContent}.
        </p>
    )
}

UpgradeMessage.propTypes = {
    isExistingPortfolio: PropTypes.bool,
}

/* eslint-disable react/display-name */
const PortfolioNavMenu = React.forwardRef(
    (
        {
            className,
            closeNav,
            currentPorfolioId,
            isSubscriptionActive,
            policy,
            portfolios: portfolioMap,
            setPortfolio,
            showPortfolioCreation,
        },
        ref
    ) => {
        const classes = bem.classNames('c-portfolio-nav-menu', className)
        const closeButtonClasses = bem.classNames(
            'c-portfolio-nav-menu__close-button'
        )
        const headerClasses = bem.classNames('c-portfolio-nav-menu__header')
        const countClasses = bem.classNames('c-portfolio-nav-menu__count')
        const itemsClasses = bem.classNames('c-portfolio-nav-menu__items')
        const portfolios = Object.values(portfolioMap)
        const portfolioCount = portfolios.length
        const hasMaxPortfolios = policy.hasMaxPortfolios
        const shouldDisplayAddPortfolio =
            portfolioCount <= PORTFOLIO_COUNT_MAX ||
            (isSubscriptionActive &&
                portfolioCount < PORTFOLIO_COUNT_MAX_PREMIUM)

        const selectPortfolio = (portfolioId) => {
            if (!portfolioId || !setPortfolio) {
                return
            }

            setPortfolio({portfolioId}).then(() => {
                history.push(routes.PORTFOLIO_HOLDINGS)
                closeNav()
            })
        }

        return (
            <nav className={classes} ref={ref}>
                <h1 className={headerClasses}>
                    Portfolio Selection
                    <Button.Close
                        className={closeButtonClasses}
                        onClick={closeNav}
                    />
                </h1>

                <span className={countClasses}>
                    {`${portfolioCount} / ${
                        isSubscriptionActive
                            ? PORTFOLIO_COUNT_MAX_PREMIUM
                            : PORTFOLIO_COUNT_MAX
                    }`}
                </span>

                <ul className={itemsClasses}>
                    {portfolios
                        .sort((a, b) => Date(a.createdAt) - Date(b.createdAt))
                        .map((portfolio, index) => {
                            const disabled =
                                hasMaxPortfolios &&
                                index + 1 > PORTFOLIO_COUNT_MAX

                            return (
                                <li
                                    key={`portfolio-thumbnail-${index}`}
                                    style={{position: 'relative'}}
                                >
                                    {disabled && (
                                        <UpgradeMessage isExistingPortfolio />
                                    )}
                                    <PortfolioNavItem
                                        disabled={disabled}
                                        isSelected={
                                            currentPorfolioId === portfolio.id
                                        }
                                        portfolio={portfolio}
                                        setPortoflio={selectPortfolio.bind(
                                            this,
                                            portfolio.id
                                        )}
                                    />
                                </li>
                            )
                        })}

                    {shouldDisplayAddPortfolio && (
                        <li
                            style={{
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                position: 'relative',
                            }}
                        >
                            {hasMaxPortfolios && <UpgradeMessage />}
                            <CreatePortfolioThumbnail
                                disabled={hasMaxPortfolios}
                                onClick={showPortfolioCreation}
                            />
                        </li>
                    )}
                </ul>
            </nav>
        )
    }
)

PortfolioNavMenu.propTypes = {
    portfolios: PropTypes.object.isRequired,
    className: PropTypes.string,
    closeNav: PropTypes.func,
    currentPorfolioId: PropTypes.string,
    isOpen: PropTypes.bool,
    isSubscriptionActive: PropTypes.bool,
    policy: PropTypes.object,
    setPortfolio: PropTypes.func,
    showPortfolioCreation: PropTypes.func,
}

PortfolioNavMenu.defaultProps = {
    portfolios: {},
}

export default PortfolioNavMenu