import React from 'react'
import Tag from 'react-uikit/tag'
import TradeButton from 'components/trade-button'
import TradeTableGetStarted from 'components/trade-table-get-started'
import {getStartedSteps} from '../../content'

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

const TradeOptionsTableRowPlaceholder = () => {
    const optionType = '– –'
    const currency = 'currency'
    const currentPriceDisplay = '$0.00'
    const displayName = 'Common Name'
    const lotSize = 'lot size'
    const strikePriceDisplay = '0.00'
    const companyName = 'Company Name'
    const impliedVolatilityDisplay = '– –%'
    const volume = '– –'
    const expiration = 'YYYY/MM/DD'
    const expirationFromToday = '–'

    const rootClassNames = bem.classNames('c-trade-options-table-placeholder')
    const issuerClassNames = bem.classNames(
        'c-trade-options-table-placeholder__issuer'
    )
    const captionClassNames = bem.classNames(
        'c-trade-options-table-placeholder__caption'
    )
    const numberClassNames = bem.classNames(
        'c-trade-options-table-placeholder__number'
    )

    return (
        <React.Fragment>
            <tr className={rootClassNames}>
                <td>
                    <span className={issuerClassNames}>{displayName}</span>
                    <br />
                    <span
                        className={captionClassNames}
                    >{`${companyName} (${lotSize})`}</span>
                </td>
                <td>
                    <Tag variant="neutral" size="small">
                        {optionType}
                    </Tag>
                </td>
                <td>
                    <span className={captionClassNames}>{expiration}</span>
                    <br />
                    <span className={numberClassNames}>
                        {expirationFromToday} <em>days</em>
                    </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}>{volume}</span>
                </td>
                <td>
                    <span className={captionClassNames}>level</span>
                    <br />
                    <span className={numberClassNames}>
                        {impliedVolatilityDisplay}
                    </span>
                </td>
                <td>
                    <span className={captionClassNames}>{currency}</span>
                    <br />
                    <span className={numberClassNames}>
                        {currentPriceDisplay}
                    </span>
                </td>
                <td>
                    <TradeButton disabled />
                </td>
            </tr>
            <TradeTableGetStarted
                colSpan={8}
                getStartedSteps={getStartedSteps}
            />
        </React.Fragment>
    )
}

export default TradeOptionsTableRowPlaceholder