var Api        = require('./api.js').Api;
var classNames = require('classnames');

module.exports.PoloniexController = React.createClass({
  getInitialState: function() {
    return {'apiKey': '', 'apiSecret': '', 'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null};
  },
  handleCredentialsChange: function(key, secret) {
    this.setState({'apiKey': key, 'apiSecret': secret});
  },
  handleCredentialsSubmit: function() {
    if (!this.state.apiKey || !this.state.apiSecret) {
      return;
    }
    Api.Call('UPDATE_MARKET', {'key': this.state.apiKey, 'secret': this.state.apiSecret, 'name': 'poloniex'}, function(err, status, data) {
      if (err) {
        console.error(err, data);
        return;
      }

      this.setState({'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null});
      this.loadBalance();
    }.bind(this));
  },
  loadBalance: function() {
    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});
        }
        return;
      }

      this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance});
    }.bind(this));
  },
  componentDidMount: function() {
    Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) {
      if (err) {
        console.error(err, data);
        return;
      }

      var flag = this.state.flag;
      if (!data.key || !data.secret) {
        flag = 'emptyCredentials';
      } else {
        this.loadBalance();
      }

      this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'flag': flag});
    }.bind(this));
  },
  render: function() {
    var displayText = null;
    switch (this.state.flag) {
      case 'loading':
        displayText = 'Loading data from poloniex...';
        break;
      case 'invalidCredentials':
        displayText = 'Invalid poloniex credentials';
        break;
      case 'emptyCredentials':
        displayText = 'Please provide poloniex credentials';
        break;
      default:
        displayText = null;
    }
    return (
      <div>
        <PoloniexBalance  balanceCurrency={this.state.valueCurrency}
                          balanceValue={this.state.balanceValue}
                          balance={this.state.balance}
                          displayText={displayText}/>
        <PoloniexCredentialsForm onLoadCredentials={this.onLoadCredentials}
                                 onCredentialsSubmit={this.handleCredentialsSubmit}
                                 onCredentialsChange={this.handleCredentialsChange}
                                 apiSecret={this.state.apiSecret}
                                 apiKey={this.state.apiKey}/>
      </div>
    );
  }
});

var PoloniexBalance = React.createClass({
  getInitialState: function() {
    return {'hideMsg': true, 'msg': '', 'msgOk': false};
  },
  render: function() {
    var dashboard = null;

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

      var balance = Object.keys(this.props.balance).map(function(currency) {
        return <div key={currency}><i className={classNames('cc', currency)}></i> {this.props.balance[currency]}</div>;
      }.bind(this));

      dashboard = (
        <div className='row'>
          <div className='col-4 align-self-center h-100'>
            <div>
              {balance}
            </div>
          </div>
          <div className='offset-1 col-7 h-100 align-self-center'>
            <div className='text-center'>
              Balance ({this.props.balanceCurrency}): <span>{this.props.balanceValue} <i className={classNames('cc', this.props.balanceCurrency)}></i></span>
            </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'>
          <div className='row'>
            <div className='col-4'>Portfolio</div>
          </div>
          <hr/>
          {dashboard}
        </div>
      </div>
    );
  }
});

module.exports.PoloniexBalance = PoloniexBalance;

var PoloniexCredentialsForm = React.createClass({
  getInitialState: function() {
    return {'hideMsg': true, 'msg': '', 'editMode': false, 'msgOk': false};
  },
  handleSubmit: function(e) {
    this.props.onCredentialsSubmit();
    this.setState({'editMode': false});
    e.preventDefault();
  },
  handleApiKeyChange: function(event) {
    this.props.onCredentialsChange(event.target.value, this.props.apiSecret);
  },
  handleApiSecretChange: function(event) {
    this.props.onCredentialsChange(this.props.apiKey, event.target.value);
  },
  onEditClick: function() {
    this.setState({'editMode': true});
  },
  render: function() {
    var submitType      = (this.state.editMode === true) ? 'submit' : 'hidden';
    var buttonDisplay   = (this.state.editMode === true) ? 'none' : 'inline';
    var secretDisplayed = (this.state.editMode === true) ? this.props.apiSecret : 'XXXXXXX';
    var keyDisplayed    = (this.state.editMode === true) ? this.props.apiKey : 'XXXXXXX';

    return (
        <div className='row api-credentials-form'>
          <div className='offset-3 col-6 box'>
            <span className='text-center'>Poloniex credentials</span>
            <hr/>
            <form role='form' onSubmit={this.handleSubmit}>
              <label className='w-100'>Key:
                <input className='form-control' type='text' placeholder='key' value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.state.editMode}/>
              </label>
              <label className='w-100'>Secret:
                <input className='form-control' type='text' placeholder='secret' value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/>
              </label>
              <input className='form-control submit' type={submitType} value='Save' />
              <button className='form-control submit' style={{display: buttonDisplay}} onSubmit={null} onClick={this.onEditClick} type='button'>Show/Edit</button>
            </form>
          </div>
        </div>
       );
  }
});

module.exports.PoloniexCredentialsForm = PoloniexCredentialsForm;