import React, { Component } from "react";
import Amount from "./Amount";

class Split extends Component {

  constructor(props) {
    super(props);
    this.state = {
      share: this.props.share,
      split: 0,
      canAdd: false,
      currentValue: 0,
      values: []
    };
    this.onNext = this.onNext.bind(this);
    this.onAdd = this.onAdd.bind(this);
    this.onRemove = this.onRemove.bind(this);
    this.onAmountChanged = this.onAmountChanged.bind(this);
  }

  onNext() {
    if (this.props.onSplits) {
      this.props.onSplits((this.state.split / 2));
    }
  }

  onAdd(event) {
    if (this.state.currentValue && this.state.canAdd) {

      this.setState({
        share: this.state.share,
        split: this.state.split + this.state.currentValue,
        canAdd: false,
        currentValue: "",
        values: this.state.currentValue ? this.state.values.concat(this.state.currentValue) : this.state.values.slice()
      });

      this.refs.amount.clear();
    }
  }

  onRemove(index) {

    var removed = this.state.values[index];
    var newSplit = this.state.split - removed;

    var values = this.state.values;
    values.splice(index, 1);

    this.setState({
      share: this.state.share,
      split: newSplit,
      canAdd: this.state.canAdd,
      currentValue: this.state.currentValue,
      values: values.slice()
    });
  }

  onAmountChanged(amount) {
    this.setState({
      share: this.state.share,
      split: this.state.split,
      canAdd: (this.state.share - this.state.split) >= amount,
      currentValue: amount,
      values: this.state.values.slice()
    });
  }

  render() {
    return (
      <div>
        <p className="app-intro">
          {this.props.title || "?"}
        </p>
        <p>
          Apparent total: {this.props.currency}{this.state.share.toFixed(2)}
        </p>
        <p>
          Current split: {this.props.currency}{(this.state.split / 2).toFixed(2)} each
        </p>
        <form className="form-inline text-center">
          <div className="form-group">
            <Amount
              ref="amount"
              name="amount"
              value={this.state.currentValue}
              label="Enter the value of the transaction."
              currency={this.props.currency}
              autofocus={true}
              onValueChanged={this.onAmountChanged}
              onEnterKey={this.onAdd}
              min={0.01}
              max={(this.state.share - this.state.split).toFixed(2)} />
          </div>
          <div className="form-group">
            <button
              type="button"
              className="btn btn-primary"
              onClick={this.onAdd}
              disabled={!this.state.canAdd}
              aria-label="Add this transaction."
              title="Add this transaction.">Add</button>
          </div>
          <div className="form-group">
            <button
              type="button"
              className="btn btn-success"
              onClick={this.onNext}
              aria-label={this.props.nextLabel}
              title={this.props.nextLabel}>{this.props.nextButton}</button>
          </div>
        </form>
        <hr />
        <div>
          <ul className="list-group">
            {this.state.values.map((value, index) => (
              <li key={index} className="list-group-item col-md-6 col-md-offset-3">
                <small>{this.props.currency}{value.toFixed(2)}</small>
                <button
                  type="button"
                  className="btn btn-danger btn-xs pull-right"
                  aria-label="Delete"
                  title="Delete this value"
                  onClick={() => this.onRemove(index)}>
                  <span className="glyphicon glyphicon-remove" aria-hidden="true"></span>
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

export default Split;

@@ -2527,32 +2527,148 @@
 e=%22form-group%22%3E%0A
+            %3Cdiv className=%22btn-toolbar%22 role=%22toolbar%22%3E%0A              %3Cdiv className=%22btn-group%22 role=%22group%22%3E%0A    
             %3Cbut
@@ -2663,32 +2663,36 @@
         %3Cbutton%0A
+    
               ty
@@ -2709,32 +2709,36 @@
 %22%0A              
+   
+ 
 className=%22btn b
@@ -2755,32 +2755,36 @@
 %22%0A              
+    
 onClick=%7Bthis.on
@@ -2802,16 +2802,20 @@
         
+  
+  
 disabled
@@ -2832,24 +2832,28 @@
 ate.canAdd%7D%0A
+    
             
@@ -2899,24 +2899,28 @@
             
+ 
+   
 title=%22Add t
@@ -2942,32 +2942,36 @@
 .%22%3EAdd%3C/button%3E%0A
+    
           %3C/div%3E
@@ -2973,32 +2973,36 @@
 /div%3E%0A          
+    
 %3Cdiv className=%22
@@ -2997,37 +2997,49 @@
  className=%22
-form-
+btn-group%22 role=%22
 group%22%3E%0A
             
@@ -3018,32 +3018,36 @@
 %22 role=%22group%22%3E%0A
+    
             %3Cbut
@@ -3056,32 +3056,36 @@
 n%0A              
+   
+ 
 type=%22button%22%0A  
@@ -3074,32 +3074,36 @@
   type=%22button%22%0A
+    
               cl
@@ -3134,32 +3134,36 @@
 %22%0A              
+   
+ 
 onClick=%7Bthis.on
@@ -3168,16 +3168,20 @@
 onNext%7D%0A
+    
         
@@ -3230,24 +3230,28 @@
             
+  
+  
 title=%7Bthis.
@@ -3292,32 +3292,72 @@
 utton%7D%3C/button%3E%0A
+              %3C/div%3E%0A            %3C/div%3E%0A
           %3C/div%3E

Put split buttons into a group