import React, {lazy, Suspense} from 'react'
import TradeButton from 'components/trade-button'
import TradeTableGetStarted from 'components/trade-table-get-started'
import {getStartedSteps} from '../../content'

const Chart = lazy(() => import('react-uikit/chart'))

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

const TradeETFsTableRowPlaceholder = () => {
    // Blank Data ==============================================================
    const currency = 'currency'
    const ticker = 'Ticker'
    const displayName = 'Fund name'
    const currentPriceDisplay = '$0.00'
    const historicalMarketValue = [
        {x: ['2018-05-30', '2018-05-31'], y: [1, 1], color: '#BFBFBF'},
    ]
    const volatilityDisplay = '0.00%'
    const returnDisplay = '0.00%'
    const dividendYieldPercentageDisplay = '0.00%'
    // =========================================================================

    const rootClassNames = bem.classNames('c-trade-etf-table-placeholder')
    const issuerClassNames = bem.classNames(
        'c-trade-etf-table-placeholder__issuer'
    )
    const captionClassNames = bem.classNames(
        'c-trade-etf-table-placeholder__caption'
    )
    const performanceClassNames = bem.classNames(
        'c-trade-etf-table-placeholder__performance'
    )
    const performanceChartClassNames = bem.classNames(
        'c-trade-etf-table-placeholder__performance-chart'
    )
    const statisticsClassNames = bem.classNames(
        'c-trade-etf-table-placeholder__statistics'
    )
    const numberClassNames = bem.classNames(
        'c-trade-etf-table-placeholder__number'
    )

    return (
        <React.Fragment>
            <tr className={rootClassNames}>
                <td>
                    <span className={issuerClassNames}>{displayName}</span>
                    <br />
                    <span className={captionClassNames}>{ticker}</span>
                </td>
                <td>
                    <div className={performanceClassNames}>
                        <span className={captionClassNames}>3 Month</span>
                    </div>
                    <Suspense fallback={null}>
                        <Chart
                            data={historicalMarketValue}
                            className={performanceChartClassNames}
                            type="sparkline"
                        />
                    </Suspense>
                </td>
                <td>
                    <dl className={statisticsClassNames}>
                        <dt>Volatility</dt>
                        <dd>{volatilityDisplay}</dd>
                        <dt>Return</dt>
                        <dd>{returnDisplay}</dd>
                        <dt>Div Yield</dt>
                        <dd>{dividendYieldPercentageDisplay}</dd>
                    </dl>
                </td>
                <td style={{verticalAlign: 'middle'}}>
                    <span className={captionClassNames}>{currency}</span>
                    <br />
                    <span className={numberClassNames}>
                        {currentPriceDisplay}
                    </span>
                </td>
                <td>
                    <TradeButton disabled />
                </td>
            </tr>
            <TradeTableGetStarted getStartedSteps={getStartedSteps} />
        </React.Fragment>
    )
}

export default TradeETFsTableRowPlaceholder