import React from 'react'
import PropTypes from 'prop-types'
import ButtonGroup from 'react-uikit/button-group'
import Icon from 'react-uikit/icon'
import {history} from 'router/history'
import routes from 'global/constants/routes'
import securityTypes from 'common-fe/constants/security-types'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)
const onUpgrade = () => history.push(routes.PAYMENT)

const securityLabels = {
    [securityTypes.EQUITY.value]: 'stocks',
    [securityTypes.FUND.value]: 'ETFs',
    [securityTypes.BOND.value]: 'bonds',
    [securityTypes.OPTION.value]: 'options',
    [securityTypes.CASH.value]: 'cash',
}

const PortfolioHoldingsOverlay = ({isShowing, securityType, onDismiss}) => {
    if (!isShowing) {
        return null
    }

    const classes = bem.classNames('c-portfolio-holdings-overlay')
    const innerClasses = bem.classNames('c-portfolio-holdings-overlay__inner')
    const iconClasses = bem.classNames('c-portfolio-holdings-overlay__icon')
    const headerClasses = bem.classNames('c-portfolio-holdings-overlay__header')
    const bodyClasses = bem.classNames('c-portfolio-holdings-overlay__body')
    const buttonClasses = bem.classNames('c-portfolio-holdings-overlay__button')

    const securityLabel = securityLabels[securityType]
    const header = `Oops! Reminder...`
    const body = `To trade ${securityLabel}, you’ll need to upgrade your account. Don't worry, your current ${securityLabel} will still remain in your holdings in case you upgrade your account.`

    return (
        <div className={classes}>
            <div className={innerClasses}>
                <Icon className={iconClasses} name="lock" />
                <h1 className={headerClasses}>{header}</h1>
                <p className={bodyClasses}>{body}</p>

                <ButtonGroup constrained>
                    <ButtonGroup.Button
                        className={buttonClasses}
                        invert
                        text="Got It"
                        variant="success"
                        onClick={onDismiss}
                    />

                    <ButtonGroup.Button
                        className={buttonClasses}
                        invert
                        isOutline
                        text="Upgrade"
                        variant="success"
                        onClick={onUpgrade}
                    />
                </ButtonGroup>
            </div>
        </div>
    )
}

PortfolioHoldingsOverlay.propTypes = {
    isShowing: PropTypes.bool,
    securityType: PropTypes.string,
    onDismiss: PropTypes.func,
}

export default PortfolioHoldingsOverlay