import React, { Component } from 'react';
import {
  LevelBarWithStatus,
  VLLevelInstructionsBar,
  VLLevelCompleted,
  VLAttackBar,
} from 'components';

import {
  BasicSqliFrontEnd,
  BasicSqliBackEnd,
  BasicSqliDatabase
} from 'components';

import {
  Terminal,
  TerminalSubmit,
  QuestionComponent
} from 'components';

export default class VLabContainer extends Component {
	constructor (props) {
		super(props);
		this.changeLevelState = this.changeLevelState.bind(this);
		this.submitQuestion = this.submitQuestion.bind(this);
		this.state = {
			isLevelChanged : false
		};
	}
	changeLevelState () {
		this.setState({
			isLevelChanged : true
		});
	}
	submitQuestion (answer) {
	    let requestObject = {};
	    let {attack} = this.props;
	    let currentLevelDetails = attack.levels[attack.currentLevel-1];
	    requestObject.vlqId = currentLevelDetails.vlqId;
	    requestObject.metaData = attack.currentLevelSubmissionDetails.metaData;
	    requestObject.userSubmission = answer;
	    console.log('requestObject', requestObject);
	    this.props.VLCommonActions.evaluateVLQAPI(requestObject);
	}
	render() {
		let {attack, VLCommonActions} = this.props;
	    let attackBarProps = {};
	    let currentLevelDetails = attack.currentLevelDetails;
	    let metaData, resultantSQLQueries, dbDetails, SQLQueryStatus;
	    try {
	      metaData = JSON.parse(attack.currentLevelSubmissionDetails.metaData || '{}')
	      resultantSQLQueries = metaData.resultant_query;
	      dbDetails = metaData.dbDetails;
	      SQLQueryStatus = metaData.sql_status;
	    } catch (e) {
	      console.log('Got exception ',e);
	    }
	    if (currentLevelDetails.vlqType === 'SQLI') {
	    	attackBarProps.componentOne = <BasicSqliFrontEnd
	                                    currentLevelDetails={currentLevelDetails || {}}
	                                    SQLQueryStatus={SQLQueryStatus}
	                                    currentLevelSubmissionDetails={attack.currentLevelSubmissionDetails}
	                                    levelChanged={this.state.isLevelChanged}
	                                    VLCommonActions={VLCommonActions}/>;
		    attackBarProps.componentTwo = <BasicSqliBackEnd
		                                    resultantSQLQueries={resultantSQLQueries || []}/>;
		    attackBarProps.componentThree = <BasicSqliDatabase
		                                      resultSet={dbDetails}/>;
	    } else {
	    	attackBarProps.componentOne = <Terminal
	    							vlqType={currentLevelDetails.vlqType}
                                    currentLevelDetails={currentLevelDetails || {}}
                                    currentLevelSubmissionDetails={attack.currentLevelSubmissionDetails}
                                    levelChanged={this.state.isLevelChanged}
                                    VLCommonActions={VLCommonActions}/>;
            if (attack.hasOwnProperty('question') && attack.question !== undefined) {
		      attackBarProps.componentTwo = <div className="boxshadow" style={{minHeight:'145px'}}>
										        <div className="row">
										          <div className="col-md-10">
										            <div className="resultantSQlQueryClass">
										              <label className="boxheading">Question</label>
										          		<QuestionComponent
					                                      presentQuestion={attack.question}
					                                      submitQuestion={this.submitQuestion}/>
										              <br/>
										            </div>
										          </div>
										        </div>
											    </div>;
		    } else {
		      attackBarProps.componentTwo = '';
		    }
		    attackBarProps.componentThree = '';
	    }
		return (
			<div>
		      <LevelBarWithStatus
		        levels={attack.levels}
		        currentLevelDetails={currentLevelDetails}
		        currentLevel={attack.currentLevel}
		        currentLevelSubmissionDetails={attack.currentLevelSubmissionDetails}
		        changeLevelState = {this.changeLevelState}
		        getVLQDetailsAPI={VLCommonActions.getVLQDetailsAPI}
		        goToLevel={VLCommonActions.goToLevel}/>
		        <div className="visible-sm visible-md"><br/></div>
		      <div className='container'>
		        <div className='row'>
		          <div className='col-md-4 col-sm-4 col-xs-12'>
		            <div className ="instructionsData boxshadow">
		              {
		                attack.currentLevelSubmissionDetails.currentSubmissionStatus === 'COMPLETED' ?
		                <div className="basicSqliLevelClearedClass output">
		                  <VLLevelCompleted
		                    totalLevels={attack.totalLevels}
		                    currentLevel={attack.currentLevel}
		                    currentLevelDetails={currentLevelDetails}
		                    changeLevelState={this.changeLevelState}
		                    getVLQDetailsAPI={VLCommonActions.getVLQDetailsAPI}
		                    goToNextLevel={VLCommonActions.goToNextLevel}/>
		                </div> :
		                <div className="basicSqliInstructionsClass">
		                  <VLLevelInstructionsBar
		                    currentSubmissionStatus={attack.currentLevelSubmissionDetails.currentSubmissionStatus}
		                    currentLevelDetails={currentLevelDetails}
		                    hints={attack.hints}
		                    learningCardActions={this.props.learningCardActions} />
		                </div>
		              }
		            </div>
		          </div>
		          <div className='col-md-8 col-sm-8 col-xs-12'>
		            <div className="executeInstructions">
		              <VLAttackBar {...attackBarProps}/>
		            </div>
		          </div>
		        </div>
		      </div>
		    </div>
		);
	}
}
