import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'

import Tag from 'react-uikit/tag'
import TradeButton from 'components/trade-button'
import optionTypes from 'common-fe/constants/option-types'
import {SUBSCRIPTION_FREE_SECURITY_TYPES} from 'store/config'

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

const TradeOptionsTableRow = ({data, policy, onTrade}) => {
    if (!data) {
        return (
            <tr>
                <td>– –</td>
            </tr>
        )
    }

    const {
        currency,
        currentPriceDisplay,
        displayName,
        expirationDate,
        id,
        impliedVolatilityDisplay,
        impliedVolatilityLevel,
        lotSizeDisplay,
        optionType,
        statistics: {volumeYesterdayDisplay},
        strikePriceDisplay,
        type,
        underlyingIssuerName,
    } = data

    const {
        canTrade,
        reason: {canTrade: buttonTooltip},
    } = policy.forSecurity(data)

    const isLocked =
        !policy.isSubscriptionActive &&
        !SUBSCRIPTION_FREE_SECURITY_TYPES.includes(type)
    const rootClassNames = bem.classNames('c-trade-options-table-row')
    const issuerClassNames = bem.classNames('c-trade-options-table-row__issuer')
    const captionClassNames = bem.classNames(
        'c-trade-options-table-row__caption'
    )
    const volatilityLevelClassNames = bem.classNames(
        'c-trade-options-table-row__volatility-level',
        {
            high: impliedVolatilityLevel === 'High',
            medium: impliedVolatilityLevel === 'Medium',
            low: impliedVolatilityLevel === 'Low',
        }
    )
    const textClassNames = bem.classNames('c-trade-options-table-row__text')
    const numberClassNames = bem.classNames('c-trade-options-table-row__number')

    const handleTrade = () => onTrade && onTrade({securityId: id})

    // NOTE: The expiration date set by TR only indicates the day that the contract expires
    // we do not want to convert to local time because by default, the time is set to 12AM UTC
    // and would result in an incorrect date locally.
    const expirationMoment = moment.utc(expirationDate)
    const todayMoment = moment.utc().startOf('day')

    const daysRemaining = expirationMoment.diff(todayMoment, 'days')
    const expirationFromToday =
        daysRemaining < 1 ? 'today' : expirationMoment.from(todayMoment)
    const expirationDisplay = expirationMoment.format('YYYY/MM/DD')

    return (
        <tr className={rootClassNames}>
            <td
                title={`${displayName} (${lotSizeDisplay}) | ${underlyingIssuerName}`}
            >
                <span className={issuerClassNames}>{displayName} </span>
                <br />
                <span
                    className={captionClassNames}
                >{`${underlyingIssuerName} (${lotSizeDisplay})`}</span>
            </td>
            <td>
                <Tag size="small">{optionTypes[optionType].label}</Tag>
            </td>
            <td>
                <span className={captionClassNames}>{expirationDisplay}</span>
                <br />
                <span className={textClassNames}>{expirationFromToday}</span>
            </td>
            <td>
                <span className={captionClassNames}>{currency}</span>
                <br />
                <span className={numberClassNames}>{strikePriceDisplay}</span>
            </td>
            <td>
                <span className={captionClassNames}>Traded YDA</span>
                <br />
                <span className={numberClassNames}>
                    {volumeYesterdayDisplay}
                </span>
            </td>
            <td>
                <span className={volatilityLevelClassNames}>
                    {impliedVolatilityLevel}
                </span>
                <br />
                <span className={numberClassNames}>
                    {impliedVolatilityDisplay}
                </span>
            </td>
            <td>
                <span className={captionClassNames}>{currency}</span>
                <br />
                <span className={numberClassNames}>{currentPriceDisplay}</span>
            </td>
            <td>
                <TradeButton
                    disabled={!canTrade && !isLocked}
                    isLocked={isLocked}
                    tooltip={buttonTooltip}
                    onClick={handleTrade}
                />
            </td>
        </tr>
    )
}

TradeOptionsTableRow.propTypes = {
    data: PropTypes.object,
    policy: PropTypes.object,
    onTrade: PropTypes.func,
}

export default TradeOptionsTableRow