import React, { Component } from 'react';
import {VLLevelHint} from 'components';
import CopyToClipboard from 'react-copy-to-clipboard';
import {LearningCardResponse} from 'components';
import AppAPI from '../../utils/AppAPI';

export default class VLLevelInstructionsBar extends Component {
  constructor(props){
    super(props);
    this.state = {
      learningCards : []
    }
  }

  componentWillReceiveProps(nextProps) {
    // console.log('VLLevelInstructionsBar porps', nextProps);
    if (nextProps.currentLevelDetails !== undefined &&  nextProps.currentLevelDetails.hasOwnProperty('instructions')) {
      this.setState({
        learningCards : nextProps.currentLevelDetails.instructions || []
      });
    }
  }
  activateNextButton(){
    alert('next');
  }

  render() {
    // console.log('instructions props', this.props);
    let learningCards = this.state.learningCards;
    let renderInstructionLearningCard = <div className="spinner">
                                          <img id='icon-instruction-Loader' src='/images/Loading.png' hidden/>
                                        </div>;
    if (learningCards instanceof Array && learningCards.length > 0) {
      // console.log('got learningCard <>>>>>>>>>>>>>>>>');
      renderInstructionLearningCard = <div className="col-xs-12">
                                        <LearningCardResponse
                                          learningCard={learningCards[0]}/>
                                      </div>
    }
    let renderHintComponent = <VLLevelHint
                              learningCards = {this.props.hints}
                              learningCardActions = {this.props.learningCardActions}/>
    return (
      <div>
        <div className="heading">
          <center><p>Instructions</p></center>
        </div>
        <div className="instructions">
          <div className="currentLevel-Instructions">
            {/*<div dangerouslySetInnerHTML={{__html: currentLevel.instructions}} />*/}
            {renderInstructionLearningCard}
          </div>
          <div className="incorrectSubmissionClass" hidden>
            <ul className="nav nav-tabs">
              <li className="clear active">
                <a data-toggle="tab" href="#submission">
                  <img className='icons-img' src='/images/ic_wrong.png' />
                </a>
              </li>
              <li className="bulb-hint">
                <a data-toggle="tab" href="#hint">
                  <img className='icons-img' src='/images/ic_bulb.png' />
                </a>
              </li>
            </ul>
            <div className="tab-content">
                <div id="submission" className="tab-pane fade in active">
                  <p>Incorrect submission</p>
                </div>
                <div id="hint" className="tab-pane fade">
                  <h5>Hint :</h5>
                    {/*<div dangerouslySetInnerHTML={{__html: currentLevel.hint}} />*/}
                    {renderHintComponent}
                </div>
                <div className="basicSqliHintsClass">

                </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
