import React from 'react'
import PropTypes from 'prop-types'
import {history} from 'router/history'
import routes from 'global/constants/routes'
import securityTypes from 'common-fe/constants/security-types'
import {SUBSCRIPTION_FREE_SECURITY_TYPES} from 'store/config'

import Button from 'react-uikit/button'

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

const tradeRoutes = {
    [securityTypes.EQUITY.value]: routes.TRADE_STOCKS,
    [securityTypes.FUND.value]: routes.TRADE_ETFS,
    [securityTypes.BOND.value]: routes.TRADE_CORP_BONDS,
    [securityTypes.OPTION.value]: routes.TRADE_OPTIONS,
    default: routes.TRADE_DEFAULT,
}

const EmptyHoldingsRow = ({
    isPublic,
    securityType: {label = 'this security', value},
    policy,
}) => {
    const isSubscriptionActive = policy.isSubscriptionActive
    const canTrade =
        !isPublic &&
        (isSubscriptionActive ||
            SUBSCRIPTION_FREE_SECURITY_TYPES.includes(value))

    const classes = bem.classNames('c-portfolio-holdings__empty')
    const messageClassNames = bem.classNames(
        'c-portfolio-holdings__empty__message'
    )
    const buttonClassNames = bem.classNames(
        'c-portfolio-holdings__empty__button'
    )

    const message = {
        [canTrade]: `You don’t currently own ${label}.`,
        [!canTrade]: `Your plan doesn’t include ${label}.`,
        [isPublic]: `This portfolio currently does not own ${label}.`,
    }.true

    const buttonText = canTrade ? `Trade ${label}` : 'Upgrade Plan'

    const navigate = () => {
        const path = canTrade
            ? tradeRoutes[value] || tradeRoutes.default
            : routes.PAYMENT
        history.push(path)
    }

    return (
        <div className={classes}>
            <p className={messageClassNames}>
                {message}
                <br />

                {!isPublic && (
                    <Button
                        className={buttonClassNames}
                        isOutline
                        size="small"
                        title={buttonText}
                        onClick={navigate}
                    >
                        {buttonText}
                    </Button>
                )}
            </p>
        </div>
    )
}

EmptyHoldingsRow.propTypes = {
    isPublic: PropTypes.bool,
    policy: PropTypes.object,
    securityType: PropTypes.shape({
        label: PropTypes.string,
        value: PropTypes.string,
    }),
}

export default EmptyHoldingsRow