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

const mapStateToProps = (state) => ({
  attack : state.attack,
  terminal : state.terminal,
  learningCardsInfo : state.learningCardState
});

const mapDispatchToProps = (dispatch) => ({
  VLCommonActions: bindActionCreators(Object.assign({}, VLCommonActions), dispatch),
  learningCardActions: bindActionCreators(Object.assign({}, LearningCardActions), dispatch)
});


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

	componentDidMount() {
		let vlqType = this.props.params.vlqType;
		let requestObject = {
			vlType : vlqType,
			offset : 0,
			length : 32
	    };
    	this.props.VLCommonActions.getLevelsForVLAPI(requestObject);
	}

	render() {
		return (
	      <div>
	        <TerminalLab
	          attack={this.props.attack}
	          learningCards={this.props.learningCardsInfo.learningCards}
	          learningCardActions={this.props.learningCardActions}
	          VLCommonActions={this.props.VLCommonActions}
	          terminal={this.props.terminal}/>
	      </div>
		);
	}
}

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