import Api from './api.js';
import React from 'react';

class PoloniexController extends React.Component {
  constructor(props) {
    super(props);
    this.state = {'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null};
  }

  loadBalance = () => {
    Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) {
      if (err) {
        console.error(err, data);
        if (err.code === 'invalid_market_credentials') {
          this.setState({'flag': 'invalidCredentials', 'valueCurrency': null, 'balanceValue': null, 'balance': null});
        } else if (err.code === 'ip_restricted_api_key') {
          this.setState({'flag': 'ipRestricted', 'valueCurrency': null, 'balanceValue': null, 'balance': null});
        }
        return;
      }

      this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance});
    }.bind(this));
  }

  componentDidMount = () => {
    this.loadBalance();
  }

  render = () => {
    var displayText = null;
    switch (this.state.flag) {
      case 'loading':
        displayText = 'Loading data from poloniex...';
        break;
      case 'invalidCredentials':
      case 'ipRestricted':
      case 'emptyCredentials':
        displayText = <div>Please provide poloniex credentials in <a href="/account">Account</a> page.</div>;
        break;
      default:
        displayText = null;
    }
    return (
      <div>
        <PoloniexBalance  balanceCurrency={this.state.valueCurrency}
                          balanceValue={this.state.balanceValue}
                          balance={this.state.balance}
                          displayText={displayText}/>
      </div>
    );
  }
}

class CurrencyLogo extends React.Component {
  render = () => {
    return <img className="currency-logo"
                src={'/public/icons/black/' + this.props.currency.toLowerCase() + '.svg' }
                title={this.props.currency}
                alt={this.props.currency} />;
  }
}

class PoloniexBalance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {'hideMsg': true, 'msg': '', 'msgOk': false};
  }

  computeCurrencyRatio = (currency) => {
    return (parseFloat(this.props.balance[currency].btcValue) / parseFloat(this.props.balanceValue) * 100.0).toFixed(1);
  }

  render = () => {
    var dashboard = null;

    if (this.props.balanceValue !== null) {

      var balance = Object.keys(this.props.balance).map(function(currency) {
        return <div key={currency}>
                 <div>
                 <CurrencyLogo currency={currency} /> {this.props.balance[currency].amount} {currency} ({this.computeCurrencyRatio(currency)}%)
                 </div>
               </div>;
      }.bind(this));

      dashboard =
        <div className="row">
          <div className="col-6 align-self-center h-100 balances">
              {balance}
          </div>
          <div className="offset-1 col-5 h-100 align-self-center">
            <div className="text-center">
              Balance ({this.props.balanceCurrency}): <span>{this.props.balanceValue}</span><CurrencyLogo currency={this.props.balanceCurrency} />
            </div>
          </div>
        </div>;
    } else {
      dashboard =
        <div className="row">
          <div className="col-12 text-center">
           <span>{this.props.displayText}</span>
          </div>
        </div>;
    }

    return (
      <div className="row">
        <div className="box offset-2 col-8 portfolio">
          <div className="row">
            <div className="col-4">Portfolio</div>
          </div>
          <hr/>
          {dashboard}
        </div>
      </div>
    );
  }
}

export default PoloniexController;