import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Validations from '../../utils/Validations';

export default class BasicSqliFrontEnd extends Component {

	constructor(props, context){
		super(props, context);
    // this.handleChangeUserName = this.handleChangeUserName.bind(this);
    // this.handleChangePassword = this.handleChangePassword.bind(this);
		this.handleSubmit = this.handleSubmit.bind(this);
	}

  componentDidUpdate () {
    // console.log('Called...');
    $('#basicSQLiErrorMessage').hide();
    if (this.props.levelChanged) {
      ReactDOM.findDOMNode(this.refs.userName).value = '';
      ReactDOM.findDOMNode(this.refs.password).value = '';
      $('#basicSQLiQueryStatus').hide()
    }
  }

  handleSubmit(e){
		e.preventDefault();
		const userName = ReactDOM.findDOMNode(this.refs.userName).value;
		const password = ReactDOM.findDOMNode(this.refs.password).value;
    if (userName !== ''  && password !== '') {
      $('#icon-basicsqli-Loader').show();
      $('#basicSQLiErrorMessage').hide('slow');
      let payloadObject = {};
      let userSubmission = {};
      userSubmission.username = encodeURIComponent(userName);
      userSubmission.password =  encodeURIComponent(password);
      payloadObject.vlqId = this.props.currentLevelDetails.vlqId;
      payloadObject.userSubmission = JSON.stringify(userSubmission);
      payloadObject.metaData = this.props.currentLevelSubmissionDetails.metaData;
      this.props.VLCommonActions.evaluateVLQAPI(payloadObject);
    } else {
      $('#basicSQLiErrorMessage').html('Username or password is missing');
      $('#basicSQLiErrorMessage').show();
    }
  }
	render() {
    // console.log('basic sqli BasicSqliFrontEnd props', this.props);
		return (
      <div className="boxshadow">
        <label  className="boxheading">Admin Panel</label>
        <div className='row'>
          <div className='col-xs-offset-4'>
            <div className="loginFormDiv">
              <div className ="loginForm">
                <form role="form" >
                  <input
                    type="text"
                    className="form-control"
                    id="userName"
                    ref="userName"
                    placeholder="Username"
                    /*onBlur={this.handleChangeUserName}*//>
                  <br/>
                  <input
                    type="password"
                    className="form-control"
                    id="password"
                    ref="password"
                    placeholder="Password"
                    /*onBlur={this.handleChangePassword}*//>
                  <br/>
                  <div className="basicSqliMessageClass text-center" >
                    <p id='basicSQLiErrorMessage' style={{color:'red',fontSize:'12px',fontFamily:'notosans',textAlign: 'left'}} hidden>
                    </p>
                  </div>
                  <div className="spinner">
                    <img id='icon-basicsqli-Loader' src='/images/Loading.png' hidden/>
                  </div>
                  <button className="btn submit-button"  onClick={this.handleSubmit} type="submit">submit</button>
                  <br/>
                </form>
              </div>
            </div>
            <div>
              <br/>
              <div>
                <p id='basicSQLiQueryStatus' style={{color:'black',fontSize:'12px',fontFamily:'notosans',textAlign: 'left'}}>
                  {this.props.SQLQueryStatus}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
		);
	}
}
