import React from 'react';
import {
	observer,
	inject
} from 'mobx-react';
import {
	AlertPage,
	Loading,
} from '../../public/learn';

import Import from '../importRelatedComponet/index';
import Top from './Top';

@inject('hrmVacationBalance')
@inject('hrmImportCommon')
@observer
export default class VacationBalanceCopy extends React.Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		this.props.hrmVacationBalance.getPermissionInfo();
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.props.hrmVacationBalance.refreshPage();
		}
	}

	componentWillUnmount() {
		this.props.hrmVacationBalance.componentWillUnmount();
	}

	render() {
		const {
			hrmVacationBalance,
			hrmImportCommon,
		} = this.props, {
			pageAccessPermission
		} = hrmVacationBalance, {
			hasRight,
			loading
		} = pageAccessPermission, {
			importDialog
		} = hrmImportCommon;

		if (!hasRight) {
			return loading ? <Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@rl8d4j`} size='lg'/> : <AlertPage ecId={`${this && this.props && this.props.ecId || ''}_AlertPage@rql20j`} />
		} else {
			return (
				<div>
					<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@o963ve`} />
					{importDialog.visible && <Import ecId={`${this && this.props && this.props.ecId || ''}_Import@wot6vn`} />}
				</div>

			)
		}
	}
}