import React, { Component } from 'react';
import { connect }            from 'react-redux';
import {bindActionCreators} from 'redux';
import {VLCommonActions} from 'redux/modules/actions/VLCommon';
import {VLTypeList} from 'components';

const mapStateToProps = (state) => ({
	attack : state.attack
});
const mapDispatchToProps = (dispatch) => ({
  VLCommonActions: bindActionCreators(Object.assign({}, VLCommonActions), dispatch)
});

export class VLTypesListView extends Component {
	constructor(props) {
		super(props);
		this.handleTryAgainClick = this.handleTryAgainClick.bind(this);
	}
	componentDidMount() {
		let requestObject = {
			'offset' : 0,
			'length' : 32
		};
		this.props.VLCommonActions.getVLTypesAPI(requestObject);
	}

	handleTryAgainClick () {
		window.location.reload();
	}
	render() {
		console.log('vlTypes', this.props);
		return (
			<div>
				<div className="spinner absolute"><img className="loading-icon" src='/images/Loading.png'/></div>

				<div className="spinner absolute tryAgain" hidden>
					<button className="btn btn-info btn-lg" onClick={this.handleTryAgainClick}>
						<span className='glyphicon glyphicon-reload'></span>Try Again!
					</button>
				</div>

				<div className="text-center internetDisconnected" hidden>
					<p className='text-danger text-center'>You are disconnected : ( </p>
					<button className="btn btn-info btn-lg" onClick={this.handleTryAgainClick}>
						<span className='glyphicon glyphicon-refresh'></span>&emsp;Try Again!
					</button>
				</div>

				<VLTypeList
					history={this.props.history}
					vlTypes={this.props.attack.vlTypes}/>
			</div>
		);
	}
}


export default connect(mapStateToProps, mapDispatchToProps)(VLTypesListView);
