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


// var AppAPI = require('../../utils/AppAPI');

var RadioOptions = require('./RadioOptions.react');

var QuestionComponent = React.createClass({
  mixins: [Navigation],
  getInitialState: function() {
    this.selectedOptions = [];
    return {};
  },
	handleSubmit: function(){
    this.disableSubmitButton(true);
    // console.log('selectedOptions', this.selectedOptions);
    if (this.props.presentQuestion.questionType === 'text') {
      this.selectedOptions = [];
      this.selectedOptions.push({
        optionId : -1,
        text : document.getElementById('vlabQuestionAnswerBox').value
      });
    }
    this.props.submitQuestion(this.selectedOptions);

	},

	getSelectedOptions: function( /*selectedOptions,score, presentQuestionId*/ optionsList){
    // console.log("selectedOptions",selectedOptions,"score",score,"presentQuestionId","presentQuestionId");
    // this.disableSubmitButton(false);
    // this.selectedAnswer = {
    //   "solutionsListUsed":"+",
    //   "hintsListUsed":"+",
    //   "optionsList":selectedOptions,
    //   "questionId":presentQuestionId,
    //   "scoreAwarded":score,
    //   "correct":score==0 ? false : true,
    //   "timeSpent":0.0,
    //   "timeStamp":8
    // };
    this.selectedOptions = optionsList
	},

  disableSubmitButton: function(flag){
    // document.getElementById('question-submit-button').disabled=flag;
  },

	render: function(){
    // if(AppAPI.objectSize(this.props.presentQuestion)>0){
      // console.log(this.props.presentQuestion);
      // console.log(this.props.presentQuestion["questionType"]);
      var optionGroup = null;
      var multimediaItem = null;
      console.log('QuestionComponent this.props.', this.props);
      switch (this.props.presentQuestion["questionType"]) {
        case "multiple_choice":
          optionGroup =
            <RadioOptions
              keys={this.props.lcId}
              presentQuestion={this.props.presentQuestion}
              getSelectedOptions={this.getSelectedOptions}/>;
              // console.log("radio options");
          break;
        case "more_than_one_multiple_choice":
          optionGroup =
            <CheckboxOptions
              key={this.props.lcId}
              disableSubmitButton={this.disableSubmitButton}
              presentQuestion={this.props.presentQuestion}
              getSelectedOptions={this.getSelectedOptions}/>
          break;
        case "text":
          optionGroup = <div className='form-group'>
                          <input type='text' className='form-control' name='vlabQuestionAnswerBox' id='vlabQuestionAnswerBox' placeholder='Got Answer?'/>
                        </div>
          break;
      }

      switch(this.props.presentQuestion["multimediaType"]){
        case "image":
          multimediaItem =
          <img className="img-responsive center-block" src={this.props.presentQuestion["questionMultimedia"]}/>;
        break;
        case "audio":
          multimediaItem =
          <audio controls="controls" className="multimedia-audio-question"
            src={this.props.presentQuestion["questionMultimedia"]}></audio>;
        break;
        case "video":
          multimediaItem =
          <video className="multimedia-option" controls="controls"
            src={this.props.presentQuestion["questionMultimedia"]}></video>;
        break;
        case "text":
          multimediaItem = null;
        break;
      }
    // }
    return(
      <div>
        <div className="row question-component">
          <div className="col-xs-12 text-center">
            <div className="col-xs-offset-2 question-preview">
                {this.props.presentQuestion["questionPreview"]}
            </div>
            <br/>
            {multimediaItem}
          </div>
        </div>
        <div className="col-xs-offset-2 optionGroup row">
          <div className="col-xs-12 text-center">
            {optionGroup}
          </div>
        </div>
        <br/><br/>
        <button
          className="btn btn-success center-block"
          id='question-submit-button'
          onClick={this.handleSubmit}>
          Submit
        </button>
      </div>
    );
    }
	});

module.exports = QuestionComponent;
