var React = require('react');
var Firebase = require('firebase');
var ReactFireMixin = require('reactfire');
var ReactIntl = require('react-intl');
var ReactBootstrap = require('react-bootstrap');
var _ = require('underscore');

var FormattedDate = require('./formatteddate');

var UserList = React.createClass({
  mixins: [ReactFireMixin],

  getInitialState: function() {
    return {
      orderList: []
    };
  },

  onExpand: function() {
    var ol = []
    for(var orderId in this.props.receipt.orderList){
      this.props.model.groupRef
      .child('orderList')
      .child('paid')
      .child(orderId)
      .once('value', function(snapshot){
        var order = snapshot.val();
        ol.push(order);
        this.setState({orderList: ol})
      }, this);
    }
  },

  renderOrder() {
    var orders;
    var _this = this;
    if(this.state.orderList.length > 0){
      var createItem = function(item, index) {
        return (
          <li key={index} >{item.clientName} ( {_this.props.model.formatOrder(item)} )</li>
        );
      };
      orders = <ul>{this.state.orderList.map(createItem)}</ul>
    }
    else{
      orders = "";
    }
    return <span>{this.props.receipt.cost}&nbsp;
      <ReactIntl.FormattedPlural value={this.props.receipt.cost}
        one="coffee"
        other="coffees"
      />&nbsp;
      paid by {this.props.receipt.payerName} on&nbsp;
      <FormattedDate value={this.props.receipt.timestamp}/>&nbsp;
      {orders}
    </span>;
  },

  render: function() {
    var _this = this;
    var expand = (this.state.orderList.length == 0) ? <ReactBootstrap.Button onClick={this.onExpand}>Expand</ReactBootstrap.Button> : "";
    return <div className="clearfix">
      <span>
        {this.renderOrder()}
      </span>
      <span className="pull-right">
        {expand}
        <ReactBootstrap.Button
          bsStyle="danger"
          onClick={ ()=> this.props.model.toggleOrderCancellation(this.props.receipt)}>
            {this.props.receipt.cancelled?"Restore":"Cancel"}
        </ReactBootstrap.Button>
      </span>
    </div>;
  }
});
module.exports = UserList;

@@ -1865,16 +1865,58 @@
 yle=
+%7Bthis.props.receipt.cancelled?%22secondary%22:
 %22danger%22
 %0A   
@@ -1911,16 +1911,17 @@
 %22danger%22
+%7D
 %0A       

Improve colour of paid order restore btn