var ClientForm = React.createClass({

    getInitialState: function() {
        return ({
            editing: _getEditing()
        });
    },

    handleSubmit: function() {
        ClientActions.create('bob','eat_out');
        return false;
    },

    componentDidMount: function() {
        ClientStore.addChangeListener(this._onChange);
    },

    componentWillUnmount: function() {
        ClientStore.removeChangeListener(this._onChange);
    },

    render: function() {
        // TODO: add parsely data attributes to form and inputs
        var name = (this.state.editing == null) ? '' : this.state.editing.name;
        var client_type = (this.state.editing == null) ? '' : this.state.editing.client_type;

        console.log(name);
        return (
            <form role="form" onSubmit={this.handleSubmit}>
            <div className="form-group">
                <label>Name</label>
                <input type="text" className="form-control" defaultValue={name}/>
            </div>
            <div className="form-group">
                <label>Client Type</label>
                <select name="client_type" className="form-control" defaultValue={client_type}>
                    <option>Choose one</option>
                    <option value="cook">Cook</option>
                    <option value="eat_out">Eat Out</option>
                </select>
            </div>
            <button type="submit" className="btn btn-default">Submit</button>
            </form>
        );
    },

    _onChange: function() {
        this.setState({
           editing: _getEditing()
        });
    }

});