import React from 'react'
import PropTypes from 'prop-types'
import AskBid from 'components/ask-bid'
import Button from 'react-uikit/button'
import Icon from 'react-uikit/icon'
import Tooltip from 'react-uikit/tooltip'
import StockExchangeOpenClose from 'components/stock-exchange-open-close'
import ChangePill from 'react-uikit/change-pill'
import routes from 'global/constants/routes'
import {history} from 'router/history'
import {SUBSCRIPTION_FREE_SECURITY_TYPES} from 'store/config'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

const StockHeader = ({exchange, openStockOrder, policy, stock}) => {
    const {
        askPrice,
        bidPrice,
        change,
        currentPriceDisplay,
        displayCurrency,
        exchangeDisplay,
        sector,
        updatedAt,
        name,
        ticker,
        type,
    } = stock

    const {canTrade, reason} = policy.forSecurity(stock)
    const isLocked =
        !policy.isSubscriptionActive &&
        !SUBSCRIPTION_FREE_SECURITY_TYPES.includes(type)
    const headerClassNames = bem.classNames('c-stock-header')
    const currencyClassNames = bem.classNames('c-stock-header__currency')
    const iconClassNames = bem.classNames('c-stock-header__icon')
    const titleClassNames = bem.classNames('c-stock-header__title')
    const valueClassNames = bem.classNames('c-stock-header__value')
    const priceClassNames = bem.classNames('c-stock-header__price')
    const dateClassNames = bem.classNames('c-stock-header__date')
    const marketClassNames = bem.classNames('c-stock-header__market')
    const buttonClassNames = bem.classNames('c-stock-header__button', {
        disabled: !canTrade,
    })
    const tooltipClassNames = bem.classNames('c-stock-header__tooltip')
    const displayExchange = sector
        ? `${exchangeDisplay} | ${sector}`
        : `${exchangeDisplay}`
    const tooltip = reason.canTrade
    let buttonText = 'Trade'

    if (isLocked) {
        buttonText = 'Unlock'
    } else if (!canTrade) {
        buttonText = 'Unavailable'
    }

    const onClick = () => {
        if (isLocked) {
            history.push(routes.PAYMENT)
        } else {
            openStockOrder()
        }
    }

    return (
        <div className={headerClassNames}>
            <section>
                <h1 className={titleClassNames}>
                    {name}
                    {ticker && ` – ${ticker}`}
                </h1>
                <p className={valueClassNames}>
                    <span className={priceClassNames}>
                        {currentPriceDisplay}{' '}
                        <span className={currencyClassNames}>
                            {displayCurrency}
                        </span>
                    </span>
                    &emsp;
                    <ChangePill
                        isPositive={
                            typeof change.percentage === 'number' &&
                            change.percentage !== 0
                                ? change.percentage > 0
                                : undefined
                        }
                        size="large"
                        value={
                            typeof change.percentage === 'number'
                                ? `${change.valueDisplay} (${change.percentageDisplay})`
                                : '- -'
                        }
                    />
                </p>
                <AskBid askPrice={askPrice} bidPrice={bidPrice} />
                <p className={dateClassNames}>{updatedAt}</p>
            </section>

            <section>
                <p className={marketClassNames} title={displayExchange}>
                    {displayExchange}
                </p>

                <StockExchangeOpenClose exchange={exchange} />
                <span data-tip="" data-for="tradeDisabledInfo">
                    <Button
                        className={buttonClassNames}
                        variant="primary"
                        onClick={onClick}
                        disabled={!canTrade && !isLocked}
                    >
                        {isLocked && (
                            <Icon className={iconClassNames} name="lock" />
                        )}
                        {buttonText}
                    </Button>

                    {!canTrade && tooltip ? (
                        <Tooltip id="tradeDisabledInfo">
                            <p className={tooltipClassNames}>{tooltip}</p>
                        </Tooltip>
                    ) : null}
                </span>
            </section>
        </div>
    )
}

StockHeader.propTypes = {
    policy: PropTypes.object.isRequired,
    stock: PropTypes.object.isRequired,
    exchange: PropTypes.shape({
        message: PropTypes.shape({
            time: PropTypes.string,
            status: PropTypes.string,
        }),
    }),
    openStockOrder: PropTypes.func,
}

export default React.memo(StockHeader)