import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {
  LevelBar,
  VLLevelInstructionsBar,
  VLLevelCompleted,
  VLAttackBar,
} from 'components';
import {
  BasicSqliFrontEnd,
  BasicSqliBackEnd,
  BasicSqliDatabase
} from 'components';

export default class BasicSqli extends Component {

  constructor (props) {
    super(props);
    this.changeLevelState = this.changeLevelState.bind(this);
    this.state = {
      isLevelChanged : false
    };
  }
  componentDidMount () {
    let requestObject = {
      vlType : 'SQLI',
      offset : 0,
      length : 32
    };
    this.props.VLCommonActions.getLevelsForVLAPI(requestObject);
  }

  changeLevelState () {
    this.setState({
      isLevelChanged : true
    });
  }

	render() {
    // console.log('BasicSqli props', this.props);
    let {attack, VLCommonActions} = this.props;
    let attackBarProps = {};
    let currentLevelDetails = attack.levels[attack.currentLevel-1];
    let metaData, resultantSQLQueries, dbDetails, SQLQueryStatus;
    try {
      // console.log('try metaData ',);
      // metaData = attack.currentLevelSubmissionDetails.metaData.replace(/'/g,'"');
      // console.log('single quotes removed', metaData);
      metaData = JSON.parse(attack.currentLevelSubmissionDetails.metaData || '{}')
      // console.log('parsed metaData ', metaData);
      resultantSQLQueries = metaData.resultant_query;
      dbDetails = metaData.dbDetails;
      SQLQueryStatus = metaData.sql_status;
    } catch (e) {
      console.log('Got exception ',e);
    }
    // console.log('parsed ', resultantSQLQueries, dbDetails, SQLQueryStatus);
    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}/>;

		return (
   <div>
      <LevelBar
        levels={attack.levels}
        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>
		);
	}
}
