import React, { Component } from 'react';
import {withRouter} from 'react-router';
export class VLType extends Component {
	constructor(props) {
		super(props);
		this.handleVLTypeClick = this.handleVLTypeClick.bind(this);
	}
	handleVLTypeClick () {
		console.log('clicked on vlType');
		let router = this.props.router;
		let vlType = this.props.vl.vlType;
		// if (vlType === 'SQLI') {
		// 	history.pushState(null,'basicsqli');
		// } else {
		// 	history.pushState(null,'terminal');
		// }
		router.push(vlType === 'SQLI' ? 'basicsqli' : 'terminal/'+this.props.vl.vlType);
	}
	render() {
		var src = 'images/sets/task.png';
		return (
			<div className="col-xs-12 col-sm-6 col-md-4"  id="sample" onClick={this.handleVLTypeClick}>
	        	<div className="panel panel-success" >
	        		<div className="panel-heading" id="heading">	
	           			<strong className="text-center">{this.props.vl.vlType}</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.vl.vlType}/>
	           			</div>
	        		</div>
	        	</div>
      		</div>
		);
	}
}
export default withRouter(VLType);