import React, {Component} from 'react';
import classNames from "classnames";
import Lang from 'components/Language';
import {Provider} from 'sbx-react-core';

import {getCurrencySymbol} from 'libs/Orders';

@Provider({
    balance: ['balance'],
    profile: ['profile']
})

export default class Balance extends Component {
    render() {
        const {profile} = this.props;
        const {balance = 0, credit = 0, equity = 0, margin = 0, freeMargin = 0, marginLevel = 0, profit = 0} = this.props.balance;
        return (
            <div className="header-balances">
                <div className="header-wrap">
                    <span className="header-balances-item">
                        <div className="text-bold">
                            <Lang>BALANCE</Lang>:
                        </div>
                        <span className="balance">
                            {balance.toFixed(2)}
                        </span>
                    </span>
                    <span className="header-balances-item">
                        <div className="text-bold">
                            <Lang>CREDIT</Lang>:
                        </div>
                        <span className="balance">
                            {credit.toFixed(2)}
                        </span>
                    </span>
                    <span className="header-balances-item">
                        <div className="text-bold">
                            <Lang>EQUITY</Lang>:
                        </div>
                        <span className="balance">
                            {equity.toFixed(2)}
                        </span>
                    </span>
                    <div className="header-margin">
                        <span className="header-balances-item">
                            <div className="text-bold">
                                <Lang>MARGIN</Lang>
                            </div>
                            <div className="text-bold ml-sm">
                                <Lang>FREE_MARGIN</Lang>
                            </div>
                        </span>
                        <div className="margin-bar">
                            <div
                                className="margin-bar-inner"
                                style={{width: (margin/(margin + freeMargin)) * 100 + '%'}}
                            />
                        </div>
                        <span className="header-balances-item">
                            <span className="balance">
                                {margin.toFixed(2)}
                            </span>
                            <span className="balance">
                                {freeMargin.toFixed(2)}
                            </span>
                        </span>
                    </div>
                    <span className="header-balances-item header-balances-item__margin-level">
                        <div className="text-bold">
                            <Lang>MARGIN_LEVEL</Lang>:
                        </div>
                        <span className="balance">
                            {marginLevel.toFixed(2) + '%'}
                        </span>
                    </span>
                </div>
                <div className="header-profit text-bold">
                    <Lang>PROFIT</Lang>: &nbsp;
                    <span className={classNames({
                        "text-red": profit < 0,
                        "text-green": profit > 0
                    })}>
                        {profit.toFixed(2)}
                        <span className="profit-currency">
                            {getCurrencySymbol(profile.accounts[0].currency)}
                        </span>
                    </span>
                </div>
            </div>
        );
    }
}