/** @jsx React.DOM */
var FeatureBox = React.createClass({

  getInitialState: function() {
    return {data: [], doFetchFeatures: true};
  },

  fetchFeatures: function() {
    if (this.state.doFetchFeatures) {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.log(status, err);
        }
      });
    }
  },

  onStartEditFeature: function() {
    this.setState({doFetchFeatures: false});
  },

  onFinishEditFeature: function() {
    this.setState({doFetchFeatures: true});
  },

  componentWillMount: function() {
    this.fetchFeatures();
    setInterval(this.fetchFeatures, this.props.pollInterval);
  },

  render: function() {
    return (
      <div className="featureBox">
        <h2>Features</h2>
        <FeatureList data={this.state.data} onStartEditFeature={this.onStartEditFeature} onFinishEditFeature={this.onFinishEditFeature}/>
      </div>
    );
  }
});

var FeatureList = React.createClass({
  render: function() {
    var self = this;
    var featureNodes = this.props.data.map(function (feature, index) {
      return (
        <Feature key={index} feature={feature} onStartEditFeature={self.props.onStartEditFeature} onFinishEditFeature={self.props.onFinishEditFeature}/>
      )
    });
    return (
      <div className="featureList">{featureNodes}</div>
    );
  }
});

var Feature = React.createClass({
  render: function() {
    var feature = this.props.feature;
    var switch_state = null;
    switch(feature.master_switch_state) {
      case true:
        switch_state = "Override on";
        break;
      case false:
        switch_state = "Override off";
        break;
      case null:
        switch_state = "Dynamic";
        break;
    }

    return(
      <div className="feature panel panel-primary">
        <div className="featureTitle panel-heading">
          <h3 className="panel-title">{feature.title}</h3>
        </div>
        <div className="panel-body row">
          <div className="featureDescription col-md-9"> {feature.description} </div>
          <div className="featureMasterSwitchState col-md-1"> {switch_state}</div>
          <div className="editFeature col-md-1"> <a href="#" onClick={this.handleEdit}>edit</a></div> <div className="deleteFeature col-md-1">delete</div>
        </div>
        <FeatureForm ref="featureEditModal" feature={this.props.feature} onStartEditFeature={this.props.onStartEditFeature} onFinishEditFeature={this.props.onFinishEditFeature}/>
      </div>
    )
  },

  handleEdit: function() {
    this.refs.featureEditModal.show();
    return false;
  }
});

var FeatureForm = React.createClass({
  cloneFeature: function() {
    var initialFeature = this.props.feature || {}
    var editingFeature = $.extend({}, initialFeature);
    this.setState({editingFeature: editingFeature})
  },

  getInitialState: function() {
    return {editingFeature: this.props.feature}
  },

  componentDidMount: function() {
    var self = this;
    var domNode = $(this.getDOMNode());
    domNode.on("hidden.bs.modal", function (e) {
      self.props.onFinishEditFeature();
    });
  },

  show: function() {
    this.props.onStartEditFeature();
    this.cloneFeature();
    $(this.getDOMNode()).modal({keyboard: true});
  },

  handleChange: function(e) {
    console.log(e);
  },

  render: function() {
    return (
      <div className="featureEdit modal fade">
        <div className="modal-dialog modal-lg">
          <div className="modal-content">
            <div className="modal-header">
              <h3 className="modal-title">edit feature</h3>
            </div>
            <div className="modal-body">
              <form className="featureEditForm" ref="form">
                <div className="row">
                  <div className="small-12 columns">
                    <label>
                      Feature title
                      <input type="text" placeholder="feature_name" ref="title" value={this.state.editingFeature.title} onChange={this.handleChange}/>
                    </label>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
});

React.renderComponent(
  <FeatureBox url="/admin/api/features" pollInterval={5000}/>,
  document.getElementById("iodized")
);


@@ -3824,50 +3824,22 @@
 orm%22
-%3E%0A                %3Cdiv className=%22row
+ role=%22form
 %22%3E%0A
-  
     
@@ -3870,29 +3870,21 @@
 me=%22
-small-12 columns
+form-group
 %22%3E%0A
-  
     
@@ -3907,31 +3907,33 @@
 abel
-%3E%0A                     
+ for=%22featureTitleInput%22%3E
  Fea
@@ -3942,20 +3942,25 @@
 re title
-%0A   
+%3C/label%3E%0A
         
@@ -3973,53 +3973,73 @@
     
- 
 %3Cinput 
-type=%22text%22 placeholder=%22feature_name
+id=%22featureTitleInput%22 className=%22form-control%22 type=%22text
 %22 re
@@ -4139,44 +4139,325 @@
     
-    %3C/label%3E%0A                  %3C/div
+%3C/div%3E%0A                %3Cdiv className=%22form-group%22%3E%0A                  %3Clabel for=%22featureDescriptionInput%22%3E Feature title%3C/label%3E%0A                  %3Ctextarea id=%22featureDescriptionInput%22 className=%22form-control%22 type=%22text%22 ref=%22description%22 value=%7Bthis.state.editingFeature.description%7D onChange=%7Bthis.handleChange%7D/
 %3E%0A  

use bootstrap form classes