var React = require('react');

var ItemForm = React.createClass({

  getInitialState: function() {
    return {
      label: '',
      icon: '',
      exec: ''
    };
  },

  componentWillReceiveProps: function(props) {

    if(props.item) {

      this.setState({
        label: props.item.label,
        icon: props.item.icon,
        exec: props.item.exec
      });
    }

  },

  render: function() {

    var state = this.state;

    return (
      <div className="item-form">
        <form>
          <div className="form-group">
            <label>Label</label>
            <input type="text" className="form-control"
              placeholder="Label"
              value={state.label}
              onChange={this.handleChange.bind(this, 'label')} />
          </div>
          <div className="form-group">
            <label>Icon</label>
            <input type="text" className="form-control"
              placeholder="Icon"
              value={state.icon}
              onChange={this.handleChange.bind(this, 'icon')} />
          </div>
          <div className="form-group">
            <label>Exec</label>
            <input type="text" className="form-control"
              placeholder="Exec" value={state.exec}
              onChange={this.handleChange.bind(this, 'exec')} />
          </div>
        </form>
      </div>
    );

  },

  handleChange: function(key, evt) {

    evt.preventDefault();

    var newState = {};
    var value = evt.currentTarget.value;

    newState[key] = value;
    this.setState(newState);

    if(typeof this.props.onItemChange === 'function') {
      this.props.onItemChange(this.props.item, key, value);
    }

  }

});

module.exports = ItemForm;