import React, { Component } from 'react';

export default class VLLevelCompleted extends Component {
  constructor(props, context){
    super(props, context);
    this.continue = this.continue.bind(this);
  }

  continue () {
    this.props.goToNextLevel(this.props.currentLevelDetails.level+1);
    this.props.changeLevelState();
    let vlqObject = {};
    let currentLevelDetails = this.props.currentLevelDetails;
    vlqObject.vlqId = currentLevelDetails.hasOwnProperty('nextVLQId')  ? currentLevelDetails.nextVLQId : currentLevelDetails.level + 1;
    this.props.getVLQDetailsAPI(vlqObject);
  }

  render() {
    let level = this.props.currentLevelDetails.level;
    return (
      <div>
        <div className="levelOutput" id="errorBasedSqliLevelClearedId">
          <div className="heading">
            <center><p>Instructions</p></center>
          </div>
          <br/><br/>
          <center>
            <img src='/images/ic_sucess.png' className='icon-sucess'/>
          </center>
          <center>
            <p className="levelcompletionnotification">
              Awesome! <br/> Level <span className="id">{level}</span> - Completed
            </p>
          </center>
          <center>
            {
              this.props.totalLevels === this.props.currentLevelDetails.level ? '' :
              <div className="button">
                <button type="button" className="btn" onClick={this.continue}>Continue</button>
              </div>
            }
          </center>
        </div>
      </div>
    );
  }
}
