var React = require('react');

var CheckBox = React.createClass({
  getInitialState: function() {
    return {
      checked: false,
    };
  },

  handleClick: function() {
    this.setState(function (prevState) {
      console.log('CheckBox',!prevState.checked);
      this.props.updateChecked(this.props.optionId, !prevState.checked);
      return {
        checked: !prevState.checked
      };
    }.bind(this));
  },

  render: function(){
    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;

    console.log(((this.props.type==="EXAM")&& (this.state.checked==true)));
    var option = this.props.option;

    switch(this.props.optionType){
      case "normal":
      case "text":
        return (
          <div className="radio-option" onClick={this.handleClick}>
            <input
              name="checkbox"
              id={this.props.optionId}
              type="checkbox"
              value={this.props.value}
              checked={this.state.checked} />
            {this.props.value} 
          </div>
        );
        break;
      case "multimedia":
        switch(option["multimediaType"]){
          case "image":
            return(
              <div className="col-xs-12 col-md-6 multimedia-option-div" onClick={this.handleClick}>
                <div className="col-xs-1 radio-option">
                  <input
                    key={"multimedia-checkbox"+option["optionId"]}
                    type="checkbox"
                    id={option["optionId"]}
                    value={option["optionPreview"]}
                    checked={this.state.checked}/>
                </div>
                <div className="col-xs-9">
                  <img className="img-responsive multimedia-option multimedia-option-image" src={option["optionMultimedia"]}></img>
                </div>
                <div className="col-xs-2">
                  {' '}{wrongOrRightIcon}
                </div>
              </div>
            );
            break;
          case "audio":
            return(
              <div className="col-xs-12 col-md-6 multimedia-option-div multimedia-audio-div" onClick={this.handleClick}>
                <div className="col-xs-1 radio-option">
                  <input
                    key={"multimedia-checkbox"+option["optionId"]}
                    type="checkbox"
                    id={option["optionId"]}
                    value={option["optionPreview"]}
                    checked={this.state.checked}/>
                </div>
                <div className="col-xs-9">
                  <audio className="multimedia-option" controls><source src={option["optionMultimedia"]}></source></audio>
                </div>
                <div className="col-xs-2">
                  {' '}{wrongOrRightIcon}
                </div>
              </div>
              );
            break;
          case "video":
            return(
              <div className="col-xs-12 col-md-6 multimedia-option-div" onClick={this.handleClick}>
                <div className="col-xs-1 radio-option">
                  <input
                    key={"multimedia-checkbox"+option["optionId"]}
                    type="checkbox"
                    id={option["optionId"]}
                    value={option["optionPreview"]}
                    checked={this.state.checked}/>
                </div>
                <div className="col-xs-9">
                  <video className="multimedia-option" controls><source src={option["optionMultimedia"]}></source></video>
                </div>
                <div className="col-xs-2">
                  {' '}{wrongOrRightIcon}
                </div>
              </div>
              );
            break;
          case "text":
            return(
            <div>
              <br/>
              Other:
              <input
                key={"multimedia-text-checkbox"+option["optionId"]}
                type="checkbox"
                id={option["optionId"]}
                className="form-control"
                onChange={this.handleChange}
                placeholder="Please type here!"/>
            </div>
            );
            break;
        }
      break;
    }
  }
});


module.exports = CheckBox;
