import "./AssetDirection.scss";

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

const caret = require('../../../../assets/icons/caret.svg');
const caretUp = require('../../../../assets/icons/caret-up.svg');
const caretDown = require('../../../../assets/icons/caret-down.svg');

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

export default class AssetDirection extends Component {
    prevPrice = 0;
    componentWillReceiveProps(nextProps, nextContext) {
        const prevPrice = (this.props.quote.ask + this.props.quote.bid)/2;
        const nextPrice = (nextProps.quote.ask + nextProps.quote.bid)/2;
        if(prevPrice !== nextPrice) {
            this.prevPrice = prevPrice;
        }
    }
    getPriceChange = () => {
        const {ask, bid} = this.props.quote;
        const nextPrice = (ask + bid)/2;
        if(!this.prevPrice) return {up: false, down: false};
        if(this.prevPrice > nextPrice) return {up: false, down: true};
        if(this.prevPrice < nextPrice) return {up: true, down: false};
    };
    render() {
        const {symbol, showDescription = false, asset: {groups, description}} = this.props;
        const {ask, bid} = this.props.quote;
        const price = (ask + bid)/2;
        const {up, down} = this.getPriceChange();
        return (
            <div className="asset-direction">

                <div className="asset-icon">
                    <img src={`/static/images/icon/${symbol}.png`} className="icon-lg mr-sm"  alt=""/>
                </div>
                <div className="asset-symbol">
                    <div className={classNames({
                        "asset-changeIcon": true,
                        "up": up,
                        "down": down
                    })}>
                        <Icon src={up ? caretUp : down ? caretDown : caret}/>
                    </div>
                    <span className={classNames({
                        "text-red": this.prevPrice > price,
                        "text-green": this.prevPrice < price,
                    })}>
                        {symbol}
                    </span>
                    <div className="asset-group">{groups[0].substring(0, 2)}</div>

                    {showDescription && (
                        <div className="asset-description text-sm text-grey">
                            {description}
                        </div>
                    )}
                </div>
            </div>
        )
    }
}