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

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

class VLLevelsView extends Component {
	constructor (props) {
		super(props);
	}

	componentDidMount() {
		let requestObject = {
			vlqSetId : 3	//hardcoded setId
		}
		this.props.VLCommonActions.getVLQIdsForVLQSetAPI(requestObject)
	}

	render() {
		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>

				<VLabContainer 
					VLCommonActions={this.props.VLCommonActions}
					attack={this.props.attack}/>
			</div>
		);
	}
}

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