/**
* @jsx React.DOM
*/
 
var MealCalc = React.createClass({
  render: function() {
   
   var total = this.props.meals.reduce(
     function(previousValue, currentValue, index, array) {
      return {
        Breakfast: previousValue.Breakfast + currentValue.Breakfast, 
        Lunch: previousValue.Lunch + currentValue.Lunch, 
        Dinner: previousValue.Dinner + currentValue.Dinner
      };
    });  

    return (    
       <tr>
            <td colSpan="2">Total (include Tips)</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>{total.Breakfast + total.Lunch + total.Dinner}</td>
            <td></td>
        </tr>
      );
    }
  }
);

var MilesCalc = React.createClass({
  render: function() {
    var total = this.props.miles.reduce(
      function(previousValue, currentValue, index, array) {
        return {
          distance: (previousValue.distance) + (currentValue.distance)
        };
    });
   
    return (    
         <tr>
            <td colSpan="2">Mult. By Allow per mile (.45 cents)</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>${total.distance * .45}</td>
            <td></td>
        </tr>
      );
    }
  }
);

var MilesRow = React.createClass({
  render: function() {
    var total = this.props.miles.reduce(
      function(previousValue, currentValue, index, array) {
        return {
          distance: previousValue.distance + currentValue.distance
        };
    });

    return (    
        <tr>
            <td colSpan="2"><strong>Miles Driven</strong></td>
            <td>{this.props.miles[0].distance}</td>
            <td>{this.props.miles[1].distance}</td>
            <td>{this.props.miles[2].distance}</td>
            <td>{this.props.miles[3].distance}</td>
            <td>{this.props.miles[4].distance}</td>
            <td>{this.props.miles[5].distance}</td>
            <td>{this.props.miles[6].distance}</td>
            <td>{total}</td>
            <td></td>
        </tr>
      );
    }
  }
);

var MealRow = React.createClass({
  render: function() {
    var total=0;
    
    if (this.props.meal=="Breakfast") {
      var total = this.props.meals.reduce(
        function(previousValue, currentValue, index, array) {      
          return {
            Breakfast: previousValue.Breakfast + currentValue.Breakfast
          };
        });    
      return (    
         <tr>
            <td></td>
            <td>{this.props.meal}</td>
            <td>{this.props.meals[0].Breakfast}</td>
            <td>{this.props.meals[1].Breakfast}</td>
            <td>{this.props.meals[2].Breakfast}</td>
            <td>{this.props.meals[3].Breakfast}</td>
            <td>{this.props.meals[4].Breakfast}</td>
            <td>{this.props.meals[5].Breakfast}</td>
            <td>{this.props.meals[6].Breakfast}</td>
            <td>{total}</td>
            <td></td>
        </tr>
      );
      } else if (this.props.meal=="Lunch") {
      var total = this.props.meals.reduce(
        function(previousValue, currentValue, index, array) {    
          return {
            Lunch: previousValue.Lunch + currentValue.Lunch
          };
        });   
      return (    
        <tr>
            <td></td>
            <td>{this.props.meal}</td>
            <td>{this.props.meals[0].Lunch}</td>
            <td>{this.props.meals[1].Lunch}</td>
            <td>{this.props.meals[2].Lunch}</td>
            <td>{this.props.meals[3].Lunch}</td>
            <td>{this.props.meals[4].Lunch}</td>
            <td>{this.props.meals[5].Lunch}</td>
            <td>{this.props.meals[6].Lunch}</td>
            <td>{total}</td>
            <td></td>
        </tr>
      );
      } else if (this.props.meal=="Dinner") {
      var total = this.props.meals.reduce(
        function(previousValue, currentValue, index, array) {
          return {
            Dinner: previousValue.Dinner + currentValue.Dinner
          };
      });   
      return (    
        <tr>
            <td></td>
            <td>{this.props.meal}</td>
            <td>{this.props.meals[0].Dinner}</td>
            <td>{this.props.meals[1].Dinner}</td>
            <td>{this.props.meals[2].Dinner}</td>
            <td>{this.props.meals[3].Dinner}</td>
            <td>{this.props.meals[4].Dinner}</td>
            <td>{this.props.meals[5].Dinner}</td>
            <td>{this.props.meals[6].Dinner}</td>
            <td>{total}</td>
            <td></td>
        </tr>
      );
      }
      
    }
  }
);

var DateRow = React.createClass({
  render: function() {
    return (    
        <tr>
            <td colSpan="2">Date</td>
            <td>Sunday<br/>Sept 7, 2014</td>
            <td>Monday<br/>Sept 8, 2014</td>
            <td>Tuesday<br/>Sept 9, 2014</td>
            <td>Wednesday<br />Sept 10, 2014</td>
            <td>Thursday<br />Sept 11, 2014</td>
            <td>Friday<br />Sept 12, 2014</td>
            <td>Saturday<br />Sept 13, 2014</td>
            <td>Totals</td>
            <td></td>
        </tr>
      );
    }
  }
);

var ExpenseReport = React.createClass({
  render: function() {
    var miles = this.props.miles;
    var meals = this.props.meals;
    return (
       <table width="100%" border="1">
        <tr>
            <th>Section 1</th>
            <th colSpan="9">Auto and Meals Expense</th>
            <th> Section 3 Comments</th>
        </tr>
        <DateRow startDate = "09/07/2014" />
        <MilesRow miles={miles} />
        <MilesCalc miles={miles} />
        <MealRow meals={meals} meal="Breakfast"/>
        <MealRow meals={meals} meal="Lunch"/>
        <MealRow meals={meals} meal="Dinner"/>
        <MealCalc meals={meals}/>
       </table>
    );
  },
});

/* mock data */
var miles = [
    {distance:3.3},
    {distance:4.0},
    {distance:2.0},
    {distance:0.0},
    {distance:0.0},
    {distance:0.0},
    {distance:22}
   ];
 
var meals = [
    {Breakfast:2.0,Lunch:3.5,Dinner:9.9},
    {Breakfast:9.0,Lunch:3.5,Dinner:9.9},
    {Breakfast:0.0,Lunch:12.5,Dinner:20},
    {Breakfast:8.4,Lunch:5,Dinner:30},
    {Breakfast:9.9,Lunch:3.5,Dinner:32},
    {Breakfast:2.0,Lunch:3.5,Dinner:9},
    {Breakfast:5,Lunch:8,Dinner:22.30}
   ];

React.renderComponent(<ExpenseReport miles={miles} meals={meals} />, document.body);