// import React and Redux dependencies
var React = require('react');
var connect = require('react-redux').connect;
var _ = require('underscore');
var $ = require('jquery');
require('jquery-serializejson');
var History = require('react-router').History;
var bindActionCreators = require('redux').bindActionCreators;
var measureActions = require('../../actions/Measures.js');
var sampleActions = require('../../actions/Samples.js');
var actions = _.extend(measureActions, sampleActions);

var DepVar = require('./DepVar');

function mapStatetoProps (state, ownProps) {
  var depVars = state.Experiments.getIn([ownProps.params.expid, 'depVars']).toJS();
  var depVarId = depVars[0];
  var measureId = state.DepVars.getIn([depVarId, 'measures', 0]);
  return {
    depVars: depVars,
    measureId: measureId,
    indVars: state.Samples.getIn([ownProps.params.sampleid, 'indVarStates']).toJS()
  };
}

function mapDispatchToProps (dispatch) {
  return {
    actions : bindActionCreators(actions, dispatch)
  };
}

var DepVars = React.createClass({
  mixins: [ History ],
  handleSubmit: function (event) {
    event.preventDefault();
    var data = $(event.target).serializeJSON();
    if (data.invalid === 'on') {
      data.valid = false;
      delete data.invalid;
    } else {
      data.valid = true;
      delete data.invalid;
    }
    $.post('/samples', data, function(samples) {
      var sample = samples[0];
      this.props.actions.insertSample(sample);
      this.props.actions.addSample(sample._id, this.props.measureId);
      this.history.pushState(null, '/viewexp/' + this.props.params.expid);
    }.bind(this));
  },

  render: function () {
    var depVars = this.props.depVars.map(function(depVarId) {
      return <DepVar key={depVarId} depVarId={depVarId} />;
    });
    var indVars = _.map(this.props.indVars, function(value, indVarId) {
      return (<input
                name={'indVars[' + indVarId + '][value]'}
                type="hidden"
                value={value} />);
    });
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          {indVars}
          {depVars}
          <div><input type="checkbox" name="invalid" />Mark sample as invalid.</div>
          <button type="submit">Submit Sample</button>
        </form>
      </div>
    );
  }
});

module.exports = connect(mapStatetoProps, mapDispatchToProps)(DepVars);

@@ -745,61 +745,125 @@
 ;%0A  
-return %7B%0A    depVars: depVars,%0A    measureId: measure
+var indVars = state.Samples.getIn(%5BownProps.params.sampleid, 'indVarStates'%5D).toJS();%0A  return %7B%0A    depVarId: depVar
 Id,%0A
@@ -876,17 +876,18 @@
 dVar
-s
+Id
 : state.
 Samp
@@ -878,30 +878,34 @@
 arId: state.
-Sample
+Experiment
 s.getIn(%5Bown
@@ -909,38 +909,35 @@
 ownProps.params.
-sample
+exp
 id, 'indVarState
@@ -923,37 +923,32 @@
 s.expid, 'indVar
-State
 s'%5D).toJS()%0A  %7D;
@@ -942,16 +942,89 @@
 ).toJS()
+%5B0%5D,%0A    depVars: depVars,%0A    measureId: measureId,%0A    indVars: indVars
 %0A  %7D;%0A%7D%0A
@@ -1499,23 +1499,20 @@
 unction(
-samples
+data
 ) %7B%0A    
@@ -1526,16 +1526,21 @@
 ample = 
+data.
 samples%5B
@@ -2207,16 +2207,365 @@
 ubmit%7D%3E%0A
+          %3Cinput%0A            name=%7B'expId'%7D%0A            type=%22hidden%22%0A            value=%7Bthis.props.params.expid%7D /%3E%0A          %3Cinput%0A            name=%7B'indVarId'%7D%0A            type=%22hidden%22%0A            value=%7Bthis.props.indVarId%7D /%3E%0A          %3Cinput%0A            name=%7B'depVarId'%7D%0A            type=%22hidden%22%0A            value=%7Bthis.props.depVarId%7D /%3E%0A
         

Send more info with samples