var React = require('react');
var RadioButton = require('./RadioButton.react');
var answers;

var RadioGroup = require('react-radio-group');

var RadioOptions = React.createClass({
  getInitialState: function() {
    return {selectedValue: null};
  },

  handleChange: function(option){
    console.log('clicked on', JSON.parse(option));
    var selectedOption = JSON.parse(option);
    var userSubmission = [{
      optionId : selectedOption.optionId,
      text : " "
    }];
    this.props.getSelectedOptions(userSubmission);
    this.setState({
      selectedValue: option
    });
  },

  handleTextChange: function(e){

  },

  render: function(){
    if(this.props.presentQuestion.optionsList.length>0){
      var radioQuestion;
      // console.log("radioOptions ",this.props.keys);
       radioQuestion =
        <RadioGroup
          name="questionOption"
          selectedValue={this.state.selectedValue}
          onChange={this.handleChange}>
          {
            function(Radio) {
                return(
                  <div>
                 {
                    this.props.presentQuestion['optionsList'].map(function(option, index) {
                      // console.log("option type :", option.optionType);
                      switch(option.optionType){
                        case "normal":
                          return(
                          <div className="row">
                            <div className="option">
                              <div className="col-xs-1 option">
                                <Radio
                                  key={index}
                                  value={JSON.stringify(option)}/>
                              </div>
                              <div className="col-xs-11 option-preview">
                                {option["optionPreview"]}
                              </div>
                            </div>
                          </div>
                          );
                          break;
                        case "text":
                          return (
                          <div className="row">
                            <div className="col-xs-1 option">
                              <Radio
                                key={index}
                                value={JSON.stringify(option)}/>
                            </div>
                            <div className="col-xs-11 option-preview">
                              {option["optionPreview"]}
                            </div>
                          </div>
                          );
                          break;
                        case "multimedia":
                          switch(option.optionMultimediaType){
                            case "image":
                             return(
                                <div>
                                  <div className="row">
                                    <div className="col-xs-12 col-md-12 multimedia-option-div">
                                      <div className="col-xs-1 option">
                                        <Radio key={index}
                                          value={JSON.stringify(option)} />
                                      </div>
                                      <div className="col-xs-11">
                                        <img className="img-responsive multimedia-option multimedia-option-image"
                                          src={option["optionMultimediaURL"]}/>
                                      </div>
                                    </div>
                                  </div>
                                  <div className="row">
                                    <div className="col-xs-10 col-xs-offset-1 option-preview">
                                      {option["optionPreview"]}
                                    </div>
                                  </div>
                                </div>
                              );
                             break;
                            case "audio":
                             return(
                              <div>
                                <div className="row">
                                  <div className="col-xs-12 col-sm-12 multimedia-option-div multimedia-audio-div">
                                    <div className="col-xs-1 option">
                                      <Radio key={index}
                                       value={JSON.stringify(option)} />
                                    </div>
                                    <div className="col-xs-11">
                                      <audio className="multimedia-option" controls>
                                        <source src={option["optionMultimediaURL"]}>
                                        </source>
                                      </audio>
                                    </div>
                                  </div>
                                </div>
                                <div className="row">
                                  <div className="col-xs-10 col-xs-offset-1 option-preview">
                                    {option["optionPreview"]}
                                  </div>
                                </div>
                              </div>
                              );
                             break;
                            case "video":
                             return(
                              <div>
                                <div className="row">
                                  <div className="col-xs-12 col-sm-12 multimedia-option-div">
                                    <div className="col-xs-1 option">
                                      <Radio key={index}
                                       value={JSON.stringify(option)} />
                                    </div>
                                    <div className="col-xs-11">
                                      <video className="multimedia-option" controls>
                                        <source src={option["optionMultimediaURL"]}></source>
                                      </video>
                                    </div>
                                  </div>
                                </div>
                                <div className="row">
                                  <div className="col-xs-10 col-xs-offset-1 option-preview">
                                    {option["optionPreview"]}
                                  </div>
                                </div>
                              </div>
                              );
                             break;
                            case "text":
                              return (
                                <div className="row">
                                  <div className="col-xs-1 option">
                                    <Radio
                                      key={index}
                                      value={JSON.stringify(option)} />
                                  </div>
                                  <div className="col-xs-11 option-preview">
                                    {option["optionPreview"]}
                                  </div>
                                </div>
                              );
                              break;
                          }
                          break;
                          default:
                            return(
                            <div className="row">
                              <div className="option">
                                <div className="col-xs-1 option">
                                  <Radio
                                    key={index}
                                    value={JSON.stringify(option)}/>
                                </div>
                                <div className="col-xs-11 option-preview">
                                  {option["optionPreview"]}
                                </div>
                              </div>
                            </div>
                            );
                            break;
                      }
                    }.bind(this))
                  }
                  </div>
                );
            }.bind(this)
          }
        </RadioGroup>;
      }
      else{
        return(
        radioQuestion = <div className="row">
          <div className="col-xs-12 text-center">
            {'No options available!'}
          </div>
          </div>);
      }
      return(
        <div className="options-group">
          {radioQuestion}
        </div>
      );
  }
});

module.exports = RadioOptions;
