import React, { PropTypes } from "react";
import { Input, Button, Alert, Pager } from "react-bootstrap";
import _ from "lodash";

import request from "../middlewares/request";

const Invoice = React.createClass({
  displayName: "Invoice",
  
    propTypes: {
      user: PropTypes.object,
    },
  
  getInitialState() {
    return {
      user: this.props.user
    };
  },

  handleConfirmClick() {
    this.setState({user: {...this.state.user, invoiceConfirmed: true}});

    const body = {invoiceConfirmed: true};
    
    request.post("/users/me/confirmInvoice", body, (err, res) => {
      let state = {};

      // TODO: Add user feedback on processing/error/success
      if (err) {
        state.alert = {style: "danger", message: "Erreur non-controlée: " + err.message};
      } else if (res.status === 200) {
        state.alert = {style: "success", message: "Changement effectué!"};
      } else {
        state.alert = {style: "danger", message: res.body.error};
      }
      this.setState(state);
    });
  },

  renderFacture: function() {
    return(
      <div className="invoice__items">
        <div className="row invoice__spacer">
          <div className="col-sm-offset-1 col-sm-5 invoice__column-title">Articles</div>
          
          <div className="col-sm-5 invoice__column-title invoice__column-price">Prix</div>
        </div>

        <div className="row invoice__spacer">
          <div className="col-sm-offset-1 col-sm-5">Jonc et billets pour la cérémonie</div>
          
          <div className="col-sm-5 invoice__column-price">{this.state.user.factureJonc} $</div>
        </div>

        <div className="row">
          <div className="col-sm-offset-1 col-sm-5">Voyage</div>
          
          <div className="col-sm-5 invoice__column-price">{this.state.user.factureVoyage} $</div>
        </div>

        <div className="row">
          <div className="col-sm-offset-1 col-sm-5">Bal</div>
          
          <div className="col-sm-5 invoice__column-price">{this.state.user.promInscription.cost} $</div>
        </div>

        <div className="row">
          <div className="col-sm-offset-1 col-sm-5">Album</div>
          
          <div className="col-sm-5 invoice__column-price">{this.state.user.factureAlbum} $</div>
        </div>

        <div className="row">
          <div className="col-sm-offset-1 col-sm-5">Photos</div>

          <div className="col-sm-5 invoice__column-price">{this.state.user.facturePhotos} $</div>
        </div>

        <div className="row">
          <div className="col-sm-offset-1 col-sm-5">Manteau</div>

          <div className="col-sm-5 invoice__column-price">{this.state.user.factureManteau} $</div>
        </div>

        <div className="row">
          <div className="col-sm-offset-1 col-sm-5">Déjà payé (photos)</div>
          
          <div className="col-sm-5 invoice__column-price">- {this.state.user.paid ? this.state.user.paid.photo : 0} $</div>
        </div>

        <div className="row">
          <div className="col-sm-offset-1 col-sm-5">Déjà payé (voyage)</div>
          
          <div className="col-sm-5 invoice__column-price">- {this.state.user.paid ? this.state.user.paid.voyage : 0} $</div>
        </div>
      </div>
    );
  },

  renderTotal() {
    const balance = this.state.user.invoiceBalance;
    return (
      <div>
        <div className="row">          
          <div className="col-sm-offset-1 col-sm-10 invoice__column-total">Sous-Total: {balance} $</div>
        </div>
      </div>
    );
  },

  renderConfirmation() {
    const invoiceConfirmed = this.state.user.invoiceConfirmed;
    return (
      <div className="invoice__confirmation">
        <div className="invoice__separator"></div>
        <div className="invoice__confirmation-message">Je confirme que ma facture est exacte.</div>
        <Button onClick={this.handleConfirmClick} bsStyle="primary" disabled={invoiceConfirmed}>
          {invoiceConfirmed ? 'Facture confirmée' : 'Confirmer ma facture'}
        </Button>
      </div>
    );
  },

  render: function() {
    return (
      <div>
        <form className="form-horizontal">
          <div className="invoice__separator"></div>
          {this.renderFacture()}
          {this.renderTotal()}
        </form>
        {this.renderConfirmation()}
      </div>
    );
  },
});

export default Invoice;

@@ -397,82 +397,8 @@
 ) %7B%0A
-    this.setState(%7Buser: %7B...this.state.user, invoiceConfirmed: true%7D%7D);%0A%0A
     
@@ -813,16 +813,93 @@
 tu%C3%A9!%22%7D;%0A
+        this.setState(%7Buser: %7B...this.state.user, invoiceConfirmed: true%7D%7D);%0A
       %7D 
@@ -3515,32 +3515,237 @@
 v%3E%0A    );%0A  %7D,%0A%0A
+  renderMessage() %7B%0A    if (this.state.alert) %7B%0A      return (%0A        %3CAlert bsStyle=%7Bthis.state.alert.style%7D %3E%0A          %7Bthis.state.alert.message%7D%0A        %3C/Alert%3E%0A      );%0A    %7D%0A    return null;%0A  %7D,%0A%0A
   renderConfirma
@@ -3749,24 +3749,24 @@
 rmation() %7B%0A
-
     const in
@@ -3816,16 +3816,17 @@
 firmed;%0A
+%0A
     retu
@@ -3919,32 +3919,32 @@
 parator%22%3E%3C/div%3E%0A
-
         %3Cdiv cla
@@ -4023,24 +4023,55 @@
 acte.%3C/div%3E%0A
+        %7Bthis.renderMessage()%7D%0A
         %3CBut

Add alert on invoice confirmation