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

import {
  Terminal
} from 'components';

export default class NetworkScanning extends Component {
  constructor (props) {
    super(props);
    this.changeLevelState = this.changeLevelState.bind(this);
    this.state = {
      isLevelChanged : false
    };
  }
  componentWillMount () {
    let requestObject = {
      vlType : 'TERMINAL',
      offset : 0,
      length : 32
    };
    this.props.VLCommonActions.getLevelsForVLAPI(requestObject);
  }

  changeLevelState () {
    this.setState({
      isLevelChanged : true
    });
  }
  render() {
    console.log('NS props', this.props);
    let {attack, VLCommonActions, TerminalActions } = this.props;
    let attackBarProps = {};
    attackBarProps.componentOne = <Terminal terminal={this.props.terminal}/>;
    attackBarProps.componentTwo = '';
    attackBarProps.componentThree = '';
    return (
      <div>
        <LevelBar
          levels={attack.levels}
          currentLevel={attack.currentLevel}
          currentLevelSubmissionDetails={attack.currentLevelSubmissionDetails}
          changeLevelState = {this.changeLevelState}
          getVLQDetailsAPI={TerminalActions.getVLQDetailsAPI}
          goToLevel={VLCommonActions.goToLevel}/>
        <div className='container'>
          <div className='row'>
            <div className='col-md-4 col-sm-4 col-xs-12'>
              <div className ="instructionsData boxshadow">
                {
                  attack.currentLevelSubmissionDetails.currentSubmissionResult === 'COMPLETED' ?
                  <div className="basicSqliLevelClearedClass output">
                    <VLLevelCompleted
                      totalLevels={attack.totalLevels}
                      currentLevel={attack.currentLevel}
                      currentLevelDetails={attack.levels[attack.currentLevel-1]}
                      changeLevelState={this.changeLevelState}
                      getVLQDetailsAPI={VLCommonActions.getVLQDetailsAPI}
                      goToNextLevel={VLCommonActions.goToNextLevel}/>
                  </div> :
                  <div className="basicSqliInstructionsClass">
                    <VLLevelInstructionsBar />
                  </div>
                }
              </div>
            </div>
            <div className='col-md-8 col-sm-8 col-xs-12'>
              <div className="executeInstructions">
                <VLAttackBar {...attackBarProps}/>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
