import React from 'react'
import PropTypes from 'prop-types'
import Icon from 'react-uikit/icon'
import ExerciseButton from 'components/exercise-button'
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 optionTypes from 'common-fe/constants/option-types'
import {renderWithCurrency} from 'common-fe/utils/render'
import {SUBSCRIPTION_FREE_SECURITY_TYPES} from 'store/config'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
const bem = new BEMModule(styles)

const OptionHoldingRow = ({
    data,
    isPublic,
    open,
    policy,
    underlyingSecurity,
    onExercise,
    onTrade,
}) => {
    const {
        change,
        currency,
        currentPrice,
        displayName: label,
        lotSize,
        marketValue,
        optionType,
        position,
        profitLoss,
        profitLossPercent,
        quantity,
        strikePrice,
        strikePriceDisplay,
        type,
        weightDisplay,
    } = data

    const {canExercise, canTrade, reason} = policy.forSecurity(
        data,
        underlyingSecurity
    )
    const isLocked =
        !policy.isSubscriptionActive &&
        !SUBSCRIPTION_FREE_SECURITY_TYPES.includes(type)

    const underlyingPrice = underlyingSecurity
        ? underlyingSecurity.currentPrice
        : null
    const underlyingPriceDisplay = renderWithCurrency(
        underlyingPrice,
        currency,
        {largeNumber: true}
    )
    const caption = `${optionTypes[optionType].label} (${lotSize})`

    const isNeutral =
        typeof underlyingPrice === 'number' &&
        typeof strikePrice === 'number' &&
        underlyingPrice - strikePrice === 0
    const isGoodToExercise =
        optionType === optionTypes.CALL.value
            ? underlyingPrice > strikePrice
            : underlyingPrice < strikePrice

    const classes = bem.classNames('c-portfolio-holdings__option', {
        open,
        public: isPublic,
    })
    const displayNameClasses = bem.classNames(
        'c-portfolio-holdings__option__display-name'
    )
    const strikePriceClasses = bem.classNames(
        'c-portfolio-holdings__option__strike-price'
    )
    const strikePriceColumnClasses = bem.classNames(
        'c-portfolio-holdings__option__strike-price-column'
    )
    const underlyingPriceClasses = bem.classNames(
        'c-portfolio-holdings__option__underlying-price',
        {
            positive: isGoodToExercise && !isNeutral,
            negative: !isGoodToExercise && !isNeutral,
        }
    )
    const buttonClasses = bem.classNames('c-portfolio-holdings__option__button')
    const exerciseButtonClasses = bem.classNames(
        'c-portfolio-holdings__option__exercise-button'
    )
    const iconClasses = bem.classNames('c-portfolio-holdings__option__icon', {
        open,
    })
    const positionClasses = bem.classNames(
        'c-portfolio-holdings__option__position'
    )
    const marketValueClasses = bem.classNames(
        'c-portfolio-holdings__option__market-value'
    )
    const profitLossClasses = bem.classNames(
        'c-portfolio-holdings__option__profit-loss'
    )

    const tradeBtnTooltip = reason.canTrade
    const exerciseBtnTooltip = reason.canExercise

    const [displayName, expiryDate] = label.split('\n')

    const exercise = () => onExercise && onExercise({security: data})
    const trade = () => onTrade && onTrade({security: data})

    return (
        <div className={classes}>
            <ColumnNameIdentifier
                className={displayNameClasses}
                defaultDisplayText=""
                displayName={displayName}
                tag="div"
            >
                <div style={{paddingLeft: '0.8rem'}}>
                    <span>{expiryDate}</span>
                    <br />
                    <span>{caption}</span>
                </div>
            </ColumnNameIdentifier>
            <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}
                lotSize={lotSize}
                price={currentPrice}
                quantity={quantity}
                tag="div"
                value={marketValue}
            />
            <ColumnNumValue
                className={strikePriceColumnClasses}
                defaultDisplayText=""
                tag="div"
            >
                <span className={strikePriceClasses}>{strikePriceDisplay}</span>
                <br />/{' '}
                <span className={underlyingPriceClasses}>
                    {underlyingPriceDisplay}
                </span>
            </ColumnNumValue>
            <ColumnChange
                align="right"
                className={profitLossClasses}
                currency={currency}
                decimal={0}
                percent={profitLossPercent}
                tag="div"
                value={profitLoss}
            />

            {!isPublic && (
                <ExerciseButton
                    className={exerciseButtonClasses}
                    disabled={!canExercise}
                    tooltip={exerciseBtnTooltip}
                    onClick={exercise}
                />
            )}

            {!isPublic && (
                <TradeButton
                    className={buttonClasses}
                    disabled={!canTrade && !isLocked}
                    isLocked={isLocked}
                    tooltip={tradeBtnTooltip}
                    onClick={trade}
                />
            )}

            {!isPublic && <Icon className={iconClasses} name="chevron-down" />}
        </div>
    )
}

OptionHoldingRow.propTypes = {
    data: PropTypes.shape({
        currency: PropTypes.string,
        currentPrice: PropTypes.number,
        change: PropTypes.object,
        displayName: PropTypes.string,
        lotSize: PropTypes.number,
        id: PropTypes.string,
        marketValue: PropTypes.number,
        optionType: PropTypes.string,
        position: PropTypes.string,
        profitLoss: PropTypes.number,
        profitLossPercent: PropTypes.number,
        quantity: PropTypes.number,
        strikePrice: PropTypes.number,
        strikePriceDisplay: PropTypes.string,
        type: PropTypes.string,
        weightDisplay: PropTypes.string,
    }),
    isPublic: PropTypes.bool,
    open: PropTypes.bool,
    policy: PropTypes.object,
    underlyingSecurity: PropTypes.object,
    onExercise: PropTypes.func,
    onTrade: PropTypes.func,
}

export default OptionHoldingRow