import React, { Component } from 'react';
import {withRouter} from 'react-router';
class VLLevel extends Component {
	constructor (props) {
		super (props)

		this.handleVLLevelClick = this.handleVLLevelClick.bind(this)
	}
	handleVLLevelClick () {
		// if (vlType === 'SQLI') {
		// 	history.pushState(null,'basicsqli');
		// } else {
		// 	history.pushState(null,'terminal');
		// }
		let router = this.props.router;
		let vlqType = this.props.vlLevel.vlqType;
		
		router.push(vlqType === 'SQLI' ? 'basicsqli' : '/terminal/'+this.props.vlLevel.vlqType);
	}
	render() {
		return (
			<div className="col-xs-12 col-sm-6 col-md-4"  id="sample" onClick={this.handleVLLevelClick}>
	        	<div className="panel panel-success" >
	        		<div className="panel-heading" id="heading">	
	           			<strong className="text-center">{this.props.vlLevel.vlqName +' : '+ this.props.vlLevel.vlqType}</strong>
	        		</div>
	        		<div className="panel-body" id="body">
	           			<div className="col-xs-4">
	           				<img src='/images/sets/task.png' className="img-responsive thumbnail" alt={this.props.vlLevel.vlqType}/>
	           			</div>
	        		</div>
	        	</div>
      		</div>
		);
	}
}
export default withRouter(VLLevel);