var React = require('react');
var LearningCardResponse = React.createClass({

  render : function(){
    console.log('LearningCardResponse this.props',this.props);
    var question =
          <div>
            <h4 className="text-center text-bold">
            {this.props.id==undefined ? null : this.props.id+1+'.'} {this.props.learningCard.lcName}
            </h4><hr/>
          </div>;
    if(this.props.learningCard.lcContentType==='text'){
      if(this.props.learningCard.lcContent!=' '){
          var content = <div className="well">{this.props.learningCard.lcContent}</div>
      }
    }
    else{
      var content = <div className="well" dangerouslySetInnerHTML={{__html: this.props.learningCard.lcContent}}/>;
    }
    var multimediaItem;
    switch(this.props.learningCard["multimediaType"]){
      case "image":
        multimediaItem = <img className="img-responsive" src={this.props.learningCard["lcMultimedia"]}></img>;
      break;
      case "audio":
        multimediaItem = <audio controls="controls" className="multimedia-audio-question" src={this.props.learningCard["lcMultimedia"]}></audio>;
      break;
      case "video":
        multimediaItem =
        <div className="embed-responsive embed-responsive-4by3">
          <video controls="controls"
          src={this.props.learningCard["lcMultimedia"]}></video>
        </div>

      break;
      case "text":
        multimediaItem = null;
      break;
    }
    return(
      <div className="learning-cards">
          {question}
          {content}
          {multimediaItem}
      </div>
    );
  }

});

module.exports = LearningCardResponse;
