import React from 'react'
import PropTypes from 'prop-types'
import Icon from 'react-uikit/icon'
import TradeButton from 'components/trade-button'
import ColumnChange from 'components/table-columns/change'
import ColumnLongShort from 'components/table-columns/long-short'
import ColumnMarketValue from 'components/table-columns/market-value'
import ColumnNameIdentifier from 'components/table-columns/name-identifier'
import ColumnNumValue from 'components/table-columns/num-value'
import {SUBSCRIPTION_FREE_SECURITY_TYPES} from 'store/config'

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

const BondHoldingsRow = ({data, isPublic, policy, open, onTrade}) => {
    const {
        ISIN,
        currency,
        currentPrice,
        change,
        displayName,
        marketValue,
        position,
        profitLoss,
        quantity,
        weightDisplay,
        profitLossPercent,
        type,
    } = data

    const {canTrade, reason} = policy.forSecurity(data)
    const isLocked =
        !policy.isSubscriptionActive &&
        !SUBSCRIPTION_FREE_SECURITY_TYPES.includes(type)
    const classes = bem.classNames('c-portfolio-holdings__bond', {
        open,
        public: isPublic,
    })
    const buttonClasses = bem.classNames('c-portfolio-holdings__bond__button')
    const iconClasses = bem.classNames('c-portfolio-holdings__bond__icon', {
        open,
    })
    const idClasses = bem.classNames('c-portfolio-holdings__bond__id')
    const positionClasses = bem.classNames(
        'c-portfolio-holdings__bond__position'
    )
    const marketValueClasses = bem.classNames(
        'c-portfolio-holdings__bond__market-value'
    )
    const profitLossClasses = bem.classNames(
        'c-portfolio-holdings__bond__profit-loss'
    )

    const buttonTooltip = reason.canTrade
    const trade = () => onTrade && onTrade({security: data})

    return (
        <div className={classes}>
            <ColumnNameIdentifier
                displayName={displayName}
                identifier={ISIN}
                tag="div"
                className={idClasses}
            />
            <ColumnLongShort
                rootClassName={positionClasses}
                tag="div"
                position={position}
            />
            <ColumnNumValue tag="div" value={weightDisplay} size="large" />
            <ColumnChange
                align="right"
                tag="div"
                currency={currency}
                isPercentFocus
                percent={change.percentage}
                value={change.value}
            />
            <ColumnMarketValue
                className={marketValueClasses}
                currency={currency}
                price={currentPrice}
                quantity={quantity}
                tag="div"
                value={marketValue}
            />
            <ColumnChange
                align="right"
                className={profitLossClasses}
                currency={currency}
                decimal={0}
                percent={profitLossPercent}
                tag="div"
                value={profitLoss}
            />

            {!isPublic && (
                <TradeButton
                    className={buttonClasses}
                    disabled={!canTrade && !isLocked}
                    isLocked={isLocked}
                    tooltip={buttonTooltip}
                    onClick={trade}
                />
            )}
            {!isPublic && <Icon className={iconClasses} name="chevron-down" />}
        </div>
    )
}

BondHoldingsRow.propTypes = {
    data: PropTypes.shape({
        change: PropTypes.object,
        currency: PropTypes.string,
        currentPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        displayName: PropTypes.string,
        id: PropTypes.string,
        ISIN: PropTypes.string,
        marketValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        position: PropTypes.string,
        profitLoss: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        profitLossPercent: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.number,
        ]),
        quantity: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        type: PropTypes.string,
        weightDisplay: PropTypes.string,
    }),
    isPublic: PropTypes.bool,
    open: PropTypes.bool,
    policy: PropTypes.object,
    onTrade: PropTypes.func,
}

export default BondHoldingsRow