var React = require('react');
var ReactDOM = require('react-dom');
var CheckBox = require('./CheckBox.react');


var CheckboxOptions = React.createClass({

	getInitialState: function() {
		return {
			answers:[],
			correctAnswers: []
		};
	},

	componentDidMount: function() {
    var correctAnswers=[];
    this.props.presentQuestion["optionsList"].map(function(option, index){
      if(option['optionScore']===10){
        correctAnswers.push(option);
      }
    }.bind(this));
    this.setState({
      correctAnswers: correctAnswers
    });
    console.log("componentDidMount",this.state.answers,correctAnswers);
	},



	updateChecked: function(id, checked) {
		var answers = this.state.answers;
    if(checked===true){
      this.props.presentQuestion['optionsList'].map(function(option, index){
        if(option['optionId']===id){
					answers.push(option);
				}
			},this);
		}
		else{
			this.props.presentQuestion['optionsList'].map(function(option, index){
				if(option['optionId']===id){
					var index = answers.indexOf(option);
					console.log('index', index);
					if (index > -1) {
						answers.splice(index, 1);
					}
				}
			},this);
		}

    this.setState({
        answers: answers
      },
      function(){
        answers = answers.sort(function(obj1,obj2){
          return obj1.optionNo-obj2.optionNo;
        });
        this.state.answers.length===0 ?
          this.props.disableSubmitButton(true):
          this.props.disableSubmitButton(false);

        this.createOptionsListObject(JSON.stringify(answers) == JSON.stringify(this.state.correctAnswers));
     }.bind(this)
    );

	},


	createOptionsListObject: function(isCorrectAnswer){
		var optionsList=[];

		this.state.answers.map(function(answer, index){
			var type = ReactDOM.findDOMNode(document.getElementById(answer["optionId"])).type;
			switch(type){
				case 'checkbox':
					optionsList.push({
            "text":" ","optionId": answer['optionId']
          });
				break;
				case 'text':
					this.props.disableSubmitButton(false);
					optionsList.push({
            "text": document.getElementById(answer["optionId"]).value,
            "optionId": answer["optionId"]
          });
				break;
			}
		},this);
    var score = isCorrectAnswer ? optionsList.length*10 : 0;
    this.props.getSelectedOptions(optionsList)
	},

	render : function(){

    var options = this.props.presentQuestion["optionsList"];
    // options = options.concat([
    //                 {
    //                     "optionType": "multimedia",
    //                     "multimediaType": "video",
    //                     "multimediaThumbnailURL": "",
    //                     "optionPreview": "Internet Explorer",
    //                     "optionId": 344,
    //                     "optionScore": 0,
    //                     "optionNo": 1,
    //                     "optionPreviewType": "text",
    //                     "optionMultimedia": "http://ibquizappdjango-beta.s3.amazonaws.com/media/kpropsnew/learningcards/133_2015-11-29_22:27:30.763520.mp4"
    //                 },
    //                 {
    //                     "optionType": "multimedia",
    //                     "multimediaType": "video",
    //                     "multimediaThumbnailURL": "",
    //                     "optionPreview": "Firefox",
    //                     "optionId": 345,
    //                     "optionScore": 0,
    //                     "optionNo": 2,
    //                     "optionPreviewType": "text",
    //                     "optionMultimedia": "http://ibquizappdjango-beta.s3.amazonaws.com/media/kpropsnew/learningcards/133_2015-11-29_22:27:30.763520.mp4"
    //                 },
    //                 {
    //                     "optionType": "multimedia",
    //                     "multimediaType": "video",
    //                     "multimediaThumbnailURL": "",
    //                     "optionPreview": "Windows",
    //                     "optionId": 346,
    //                     "optionScore": 10,
    //                     "optionNo": 3,
    //                     "optionPreviewType": "text",
    //                     "optionMultimedia": "http://ibquizappdjango-beta.s3.amazonaws.com/media/kpropsnew/learningcards/133_2015-11-29_22:27:30.763520.mp4"
    //                 },
    //                 {
    //                     "optionType": "multimedia",
    //                     "multimediaType": "video",
    //                     "multimediaThumbnailURL": "",
    //                     "optionPreview": "Chrome",
    //                     "optionId": 347,
    //                     "optionScore": 0,
    //                     "optionNo": 4,
    //                     "optionPreviewType": "text",
    //                     "optionMultimedia": "http://ibquizappdjango-beta.s3.amazonaws.com/media/kpropsnew/learningcards/133_2015-11-29_22:27:30.763520.mp4"
    //                 }
    //             ]);
  	var OptionsList = options.map(function(option, index){

      var wrongOrRightIcon =
        ((this.props.type==="EXAM")&& (this.state.checked==true)) ?
          this.props.score !== 0 ?
            <div className="wrong-right">
              <i className="fa fa-check right">
              </i>
            </div>:
            <div className="wrong-right">
              <i className="fa fa-times wrong">
              </i>
            </div> :
          null;

  		switch(option["optionType"]){
    		case "normal":
        case "multimedia":
        case "text":
    			return (
            <CheckBox
              updateChecked={this.updateChecked}
    					key={index}
              option={option}
    					type={this.props.type}
              optionType={option["optionType"]}
    					optionId={option["optionId"]}
    					score={option['optionScore']}
    					value={option["optionPreview"]}>
    					{option["optionPreview"]}
            </CheckBox>
          );
    		break;
  		}
  	},this);
  	return(
      <div className="options-group">
        {OptionsList}
      </div>
    );
	}
});

module.exports = CheckboxOptions;


  // handleChange: function(){
  //   var nocheckboxeschecked=false;
  //   var i = 0;
  //   var optionsList = [];
  //   this.props.presentQuestion["optionsList"].map(function(option,index){
  //     var optionType = React.findDOMNode(document.getElementById(option["optionId"])).type;
  //     switch(optionType){
  //       case "checkbox":
  //         if(option["isChecked"]===true){
  //           nocheckboxeschecked = true;
  //           optionsList[i++]= {"text":" ","optionId": option["optionId"]}
  //           return("");
  //         }
  //       break;
  //       case "text":
  //         if(document.getElementById(option["optionId"]).value!=""){
  //           nocheckboxeschecked = true;
  //           optionsList[i++]= {"text": document.getElementById(option["optionId"]).value,"optionId": option["optionId"]}
  //           return({"text": React.findDOMNode(document.getElementById(option["optionId"])).value,"optionId": option["optionId"]});
  //         }
  //       break;
  //       }
  //   },this);
  //   nocheckboxeschecked ? this.props.disableSubmitButton(false): this.props.disableSubmitButton(true);
  // },
