var Navbar = React.createClass({
  getInitialState: function() {
    return { recordId: '' }
  },
  handleChange: function(event) {
    var val = event.target.value;

    val = parseInt(val);
    if (val > 0) {
      this.setState({ recordId: val });

      clearTimeout(this.uiv);
      this.uiv = setTimeout(function() {
        this.props.onNavigate({ view: 'show', recordId: this.state.recordId });
      }.bind(this), 500);
    } else {
      this.props.onNavigate({ view: 'list', recordId: '' });
    }
  },
  onFocus: function() {
    setTimeout(function() {
      React.findDOMNode(this.refs.input).setSelectionRange(0, 10);
    }.bind(this), 100);
  },
  navigateTo: function(view) {
    return function(event) {
      this.props.onNavigate({ view: view, clone: null });
    }.bind(this)
  },
  render: function() {
    return (
      <ul className="top-nav">
        <li><a href="javascript: void 0;" onClick={this.navigateTo('list')}>Alla poster</a></li>
        <li><a href="javascript: void 0;" onClick={this.navigateTo('search')}>Sök</a></li>
        <li><a href="javascript: void 0;" onClick={this.navigateTo('results')}>Resultat</a></li>
        <li><a href="javascript: void 0;" onClick={this.navigateTo('new')}>Ny post</a></li>
        <li>
          <input type="text" value={this.state.recordId} onChange={this.handleChange} ref="input" onFocus={this.onFocus} />
          <i className="fa fa-file-text-o"></i>
        </li>
      </ul>
    );
  }
});