import "./AssetBox.scss";

import React, {Component} from 'react';
import classNames from "classnames";
import {Provider} from 'sbx-react-core';
import Price from 'sbx-react-price';

import AssetDirection from "containers/Market/components/AssetDirection";

@Provider({
    asset: props => ['assets', props.symbol],
    quote: props => ['feed', props.symbol]
})

export default class AssetBox extends Component {

    getChange = symbol => {
        const {ask, bid} = this.props.quote;
        const {ohlc} = this.props.asset;
        const price = (ask + bid)/2;
        return (price - ohlc[0])/ohlc[0] * 100
    };

    render() {
        const {symbol, change, quote, asset: {digits, ohlc}} = this.props;
        const price = (quote.ask + quote.bid)/2;
        return (
            <>
                <AssetDirection symbol={symbol} showDescription={true}/>
                <div className={classNames({
                    "asset-change": true,
                    "text-green": price > ohlc[0],
                    "text-red": price < ohlc[0]
                })}>
                    {this.getChange().toFixed(2)}%
                </div>
                <div className="asset-quote">{quote && <Price digits={digits}>{quote.bid}</Price>}</div>
                <div className="asset-quote">{quote && <Price digits={digits}>{quote.ask}</Price>}</div>
            </>
        )
    }
}