var React = require('react');
var LearningCardResponse = require('./LearningCardResponse.react');
var Navigation = require('react-router').Navigation;

var LearningCardGroup  = React.createClass({
  mixins: [Navigation],
  getInitialState: function() {
    return {
      currentLearningCardIndex: 0
    };
  },
  goToNextInCompleteSet: function(){
    // this.props.getFirstInCompleteTopic();
  },
  handleLogin: function(){
    this.transitionTo('loginView');
  },
  next : function() {
    var learningCards = this.props.learningCards;
    var currentLearningCardIndex = this.state.currentLearningCardIndex;
    // learningCards[currentLearningCardIndex].lcStatus = "COMPLETED";
    // this.props.learningCardActions.receivedquestions(learningCards,222);
    if(currentLearningCardIndex<learningCards.length-1){
      currentLearningCardIndex +=1;
    }
    this.setState({
      currentLearningCardIndex: currentLearningCardIndex
    });
  },
  prev : function(){
    var currentLearningCardIndex = this.state.currentLearningCardIndex;
    if(currentLearningCardIndex!=0){
      currentLearningCardIndex -=1;
    }
    this.setState({
      currentLearningCardIndex: currentLearningCardIndex
    });
  },
  render : function(){
    // if(auth.getToken()){
      var learningCards = this.props.learningCards;
      if(learningCards !== undefined && learningCards.length===0){
          return(<div style={{textAlign: 'center'}}>No learning cards to show!</div>);
      }
      var prevButton = '';
      if (this.state.currentLearningCardIndex !== 0) {
        prevButton = <div  className="col-xs-1">
            <button type="button" className="btn btn-info" onClick={this.prev}>
              <span className="prev glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            </button>
          </div>
      }
      var nextButton = <div className="col-xs-1" >
            <button type="button" className="btn btn-info" onClick={this.next}>
                <span className="next glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            </button>
          </div>;
      if (this.state.currentLearningCardIndex === learningCards.length-1) {
        nextButton = '';
      }
      if(learningCards !== undefined &&  learningCards.length > 0){
        return(
        <div className='row lc-group'>
          {prevButton}
          <div className="col-xs-10">
            <LearningCardResponse
              goToNextInCompleteSet={this.props.goToNextInCompleteSet}
              currentLearningCardIndex = {this.state.currentLearningCardIndex+1}
              learningCardsLength ={this.props.learningCards.length}
              learningCard={this.props.learningCards[this.state.currentLearningCardIndex]}
              setId={this.props.setId}/>
          </div>
          {nextButton}
        </div>
        );
      }
      else{
        return(<div className="spinner"><img src="images/Loading.gif"/></div>);
      }
  }
});

module.exports = LearningCardGroup;
