import React from "react"
import * as converts from "../../utils/converter"
import BigNumber from "bignumber.js"
import ReactTooltip from 'react-tooltip'

const AccountBalanceView = (props) => {

  function displayBalance(balance, rateUSD) {
    return props.showBalance ? `${props.translate("address.my_balance") || "Balance"}: ${balance} <br/>${props.translate("address.estimated_value") || "Estimated value"}: ${converts.roundingNumber(balance * rateUSD)} USD` :
      `${props.translate("address.my_balance") || "Balance"}: ${balance}`
  }

  function getBalances() {
    var balances = converts.shortEthBalance(props.tokens)
      .map(token => {
        var balance = converts.toT(token.balance, token.decimal)

        var tokenEpsilon = converts.caculateTokenEpsilon(token.rate, token.decimal, token.symbol)
        var bigBalance = new BigNumber(token.balance)
        return (
          props.showZeroBalance || bigBalance.greaterThanOrEqualTo(tokenEpsilon) ?
            <div data-tip={displayBalance(balance, token.rateUSD)}
              className="columns my-2" key={token.symbol} data-for={token.symbol}
              onClick={(e) => props.selectToken(e, token.symbol, token.address)}
            >
              <div className={'balance-item ' + (token.symbol == props.sourceActive ? 'active' : '')}>
                <div className="d-inline-block">
                  <div className="symbol font-w-b">{token.symbol}</div>
                  <div className="balance">{converts.roundingNumber(balance)}</div>
                </div>
              </div>
              <ReactTooltip place="bottom" id={token.symbol} type="light" html="true"/>
            </div>
            : <div key={token.symbol} />
        )
      })
    return balances
  }

  function getBalanceUsd() {
    var total = 0
    Object.values(props.tokens).map(token => {
      var balance = converts.toT(token.balance, token.decimal)
      total += balance * token.rateUSD
    })
    var roundingTotal = converts.roundingNumber(total)
    return roundingTotal
  }

  // var checkBox = props.showZeroBalance ? <img src={require("../../../assets/img/checkmark-selected-dark.svg")} />
  //   : <img src={require("../../../assets/img/checkmark-unselected-dark.svg")} />

  return (
    <div>
      <div className="row balance-header small-11 medium-12 large-12">
        <div className="column">
          <div className="mt-3 clearfix">
            <h4 className="title font-w-b float-left">{props.translate("address.my_balance") || "My balance"}</h4>
            <div onClick={props.toggleZeroBalance} class="float-left">
              {/* {checkBox} */}
            </div>
            {props.showBalance && (
              <p className="float-right estimate-value">
                <span className="text-capitalize">{props.translate("address.total") || "Total value"}</span>
                <span className="font-w-b font-s-up-1 ml-2">{getBalanceUsd()}</span> USD
              </p>
            )}
          </div>
        </div>
      </div>
      <div className="balances">
        <div className={'row small-up-3 medium-up-6 large-up-8 ' + (props.expanded ? 'active' : '')}>
          {getBalances()}
        </div>
        {Object.keys(props.tokens).length > 8 && (
          <div className="expand">
            <div className="row align-right">
              <div className="text-right">
                <button onClick={props.toggleBalances}>
                  <i className={'k k-angle ' + (props.expanded ? 'up' : '')}></i>
                </button>
              </div>
            </div>
          </div>
        )
        }
      </div>
    </div>
  )
}

export default AccountBalanceView
@@ -266,16 +266,21 @@
 lance ? 
+%0A    
 %60$%7Bprops
@@ -327,26 +327,52 @@
 ance%22%7D: 
-$%7Bbalance%7D
+%0A    %3Cstrong%3E$%7Bbalance%7D%3C/strong%3E%0A   
  %3Cbr/%3E$%7B
@@ -437,16 +437,29 @@
 alue%22%7D: 
+%0A    %3Cstrong%3E
 $%7Bconver
@@ -499,21 +499,28 @@
 SD)%7D
+%3C/strong%3E
  USD%60
- :
 %0A    
- 
+:
  %60$%7B
@@ -572,16 +572,24 @@
 ance%22%7D: 
+%3Cstrong%3E
 $%7Bbalanc
@@ -590,16 +590,25 @@
 balance%7D
+%3C/strong%3E
 %60%0A  %7D%0A%0A 
@@ -1710,14 +1710,14 @@
 tml=
-%22
+%7B
 true
-%22
+%7D
 /%3E%0A 

update text bold balance