/** @jsx React.DOM */

var React = require('react');
var brace = require('brace');
var AceEditor = require('react-ace');

var UserGist = React.createClass({displayName: "UserGist",
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: '',
      gistArray: [],
      currentIndex: 0,
      html: '',
      codeText: '',
      codeType: ''
    };
  },


  componentWillUnMount: function() {
      $(document.body).off('keydown', this.handleKeyDown);
  },

  componentDidMount: function() {
    $(document.body).on('keydown', this.handleKeyDown);

    jQuery.get(this.props.source, function(result) {
      var lastGist = result.files[0];
      var gists = result.files;
      var gistsArray = [];
      for (key in gists) {
        gistsArray.push(gists[key]);
      }
      gists = gistsArray;
      var gist = gists[this.state.currentIndex];
      var theurl = gist.raw_url;
      var type = gist.language;

      jQuery.get(theurl, function(result2) {
        this.setState({
          codeText: result2
        });
      }.bind(this));
      if (this.isMounted()) {
        this.setState({
          gistArray: gists,
          currentIndex: 0,
          codeType: type
        });
      }
    }.bind(this));
  },

  handleLeft: function(){

    var index = this.state.currentIndex;
    index--;
    if (index < 0) {
      index = 0;
    }

    var gist = this.state.gistArray[index];
    var theurl = gist.raw_url;
    var type = gist.language;

    jQuery.get(theurl, function(result2) {
      this.setState({
        codeText: result2
      });
    }.bind(this));
    
    this.setState({
      currentIndex: index,
      codeType: type  
    });
  },

  handleRight: function(){
    var index = this.state.currentIndex;
    index++;
    if (index > this.state.gistArray.length - 1) {
      index = this.state.gistArray.length - 1
    }

    var gist = this.state.gistArray[index];
    var theurl = gist.raw_url;
    var type = gist.language;

    jQuery.get(theurl, function(result2) {
      this.setState({
        codeText: result2
      });
    }.bind(this));

    this.setState({
      currentIndex: index,
      codeType: type
    });
  },

  handleKeyDown: function(e) {
    var LEFT = 37;
    var RIGHT = 39;
    if( e.keyCode == LEFT) {
      this.handleLeft();
    }
    else if( e.keyCode == RIGHT ) {
        this.handleRight();
    }
  },

  render: function() {
    if (!this.state.gistArray || !this.state.gistArray[this.state.currentIndex]){
      return (React.createElement("div", null, "loading..."));
    }
    return (
      React.createElement("div", null, 
        React.createElement("button", {onClick: this.handleLeft}, "Left"), 
        React.createElement("button", {onClick: this.handleRight}, "Right"), 

        React.createElement("a", {href: this.state.gistArray[this.state.currentIndex].html_url}, this.state.gistArray[this.state.currentIndex].id, " ", this.state.codeType), 
        this.state.codeText
      )
      );
  }
});

function onChange(newValue) {
  console.log('change',newValue)
}

React.render(
  React.createElement(AceEditor, {
    mode: "java", 
    theme: "github", 
    onChange: onChange, 
    name: "UNIQUE_ID_OF_DIV"}),
  document.getElementById('app')
);

// React.render(
//   <UserGist source="https://api.github.com/gists/4ebc65db31cd2a2ce0e2" />,
//   document.getElementById('app')
// );


// var Hello = React.createClass({
//     render: function() {
//         return <div>Hello {this.props.name}</div>;
//     }
// });
 
// React.render(<Hello name="World" />, document.getElementById('container'));

// var editor = ace.edit("editor");
// editor.setTheme("ace/theme/monokai");
// editor.getSession().setMode("ace/mode/javascript");
//  