var React = require('react');
var QuestionComponent = require('../QuestionCards/QuestionComponent.react');
// var AppConstants = require('../../constants/AppConstants');
var ProgressBar = require('../ProgressBar/ProgressBar.react');

var LearningCard = React.createClass({

  getLearnCardContent: function(lcContent){

    var questionPreviewList = lcContent.split("|||");
    var verb = questionPreviewList[3];
    var thirdPerson = questionPreviewList[4];
    var solution =
      questionPreviewList[7]!==""?
        <div>
          <div className="col-xs-12 solution">
            <span className='text-center solution-heading'>Solution</span>
            <hr className='underline'/>
            <span className='text-center'>
              {questionPreviewList[7]}
            </span>
            <span className="text-center"></span>
          </div>
          <div className="col-xs-12 solution">
            <span className="text-center">
              {'('+questionPreviewList[6]+')'}
            </span>
          </div>
        </div>:
        <div className="col-xs-12 solution">
          <span className='text-center solution-heading'>Solution</span>
          <hr className='underline'/>
            <span className="text-center">
              {questionPreviewList[6]}
            </span>
        </div>
    var questionPreview =
        <div className="col-xs-12 main-container">
          <div className="col-xs-7 vdivide english-pattern-question">
            <div className ="col-xs-12 dec text-center">
              <h4 className='text-center'>{questionPreviewList[5]}</h4><br/><br/>
            </div>
            <div className="row">
              <div className='col-xs-12'>
              <div className="col-xs-6 dec-simple-active" style={{border: '1px solid #e9e9e9'}}>
                  <div className="col-xs-12 dec text-center" style={{height: '80px'}}>
                    <img className='img-responsive center-block' style={{height: '100%', width: '70%'}}
                      src={questionPreviewList[0]}/>
                  </div>
                  <div className="col-xs-12 active text-center" style={{height: '80px'}}>
                    <img className='img-responsive center-block' style={{height: '100%'}}
                      src={questionPreviewList[2]}/>
                  </div>
                  <div className="col-xs-12 help-3rd-person text-center" style={{height: '80px'}}>
                    <div className="help">
                      <button type="button" className={(verb=='-') || (verb=='') ? 'inactive-gray': ''}>
                        {verb!='-' ? questionPreviewList[3]: ''}
                      </button>
                    </div>
                  </div>
              </div>
              <div className="col-xs-6 dec-simple-active">
                <div className="col-xs-12 simple text-center"  style={{height: '240px'}}>
                  <img className='img-responsive center-block' style={{height: '100%'}}
                    src={questionPreviewList[1]}/>
                </div>
              </div>
              </div>
            </div>
            <div className="row">
              <div className="col-xs-12 text-center">
                <div className="col-xs-12 third-person pull-right">
                  <button type="button" className={(thirdPerson=='-') || (thirdPerson=='') ? 'inactive-gray': ''}>
                    {thirdPerson!='-' ? questionPreviewList[4]: ''}
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div className="col-xs-5 help-3rd-person text-center">
            {solution}
          </div>
        </div>;
    return questionPreview;
  },

  render: function(){
    var multimediaItem = null;
    var header = null;
    var successIcon = null;
    if(this.props.lcDetails['cardType']==='CARD'){

      switch(this.props.lcDetails['learningCardDetails']['lcContentType']){
        case 'text':
          // alert('text');
          content = <div>{this.props.lcDetails['learningCardDetails']['lcContent']}</div>;
          break;
        case 'html':
          content = <div dangerouslySetInnerHTML={{__html: this.props.lcDetails['learningCardDetails']['lcContent']}} style={{minHeight: '250px'}}/>;
          break;
        case 'EnglishPattern':
          var content =
          <div>
            {this.getLearnCardContent(this.props.lcDetails['learningCardDetails']['lcContent'])}
          </div>;
          break;
        default:
          var content = null;
          break;
      }
      switch(this.props.lcDetails['learningCardDetails']["multimediaType"]){
        case "image":
          var multimediaItem = <img className="img-responsive" src={this.props.learningCard['learningCardDetails']["lcMultimedia"]}></img>;
        break;
        case "audio":
          var multimediaItem = <audio controls="controls" className="multimedia-audio-question" src={this.props.learningCard['learningCardDetails']["lcMultimedia"]}></audio>;
        break;
        case "video":
          var multimediaItem =<video className="multimedia-option" controls="controls" src={this.props.learningCard['learningCardDetails']["lcMultimedia"]}></video>;
        break;
        case "text":
          var multimediaItem = null;
        break;
        default:
          var multimediaItem = null;
          break;
      }
      if(this.props.lcStatus=='COMPLETED'){
        var className='col-md-9 well lcStatusCompleted';
        successIcon = <i className="fa fa-check"></i>;
      }
      if(this.props.type==='FRONTVIEW'){
      header=
        <div className="row">
        <div className="col-xs-1 successIcon text-center pull-right">
           {successIcon}
        </div>
        </div>;
      }
    } else if(this.props.lcDetails['cardType']==='QUESTION'){
      var content =
      <div>
        <QuestionComponent
          type={"LEARN"}
          handleAnswer={this.props.handleAnswer}
          presentQuestion={this.props.lcDetails['questionDetails']}
          next={this.props.next}
          prev={this.props.prev}/>
      </div>;
    }
    var percent = (this.props.currentLearningCardIndex/this.props.learningCardsLength)*100;
    var displayInCompleteCards = this.props.currentLearningCardIndex+'/'+this.props.learningCardsLength;
    if(this.props.lcDetails['cardType']==='CARD' &&
            (this.props.lcDetails['learningCardDetails']['lcContentType']==='html' ||
             this.props.lcDetails['learningCardDetails']['lcContentType']==='text')){
      var lcContentTypeClassName = "col-xs-4 col-xs-offset-4 prev-next html-text-prev-next";
    }else{
      if(this.props.lcDetails['cardType']==='QUESTION' && this.props.lcDetails['questionDetails']["questionType"]==="multiple_choice")
      {
        var lcContentTypeClassName = "col-xs-4 col-xs-offset-4 prev-next html-text-prev-next";
      }else{
        var lcContentTypeClassName = "col-xs-5 col-xs-offset-7 prev-next";
      }
    }


    return(
      <div>
        {header}
        {content}
        {multimediaItem}
      </div>);
  }
});

module.exports = LearningCard;
