import React from 'react';
import {
	observer,
	inject
} from 'mobx-react';
import {
	AlertPage,
	Loading,
} from '../../public/learn';
import Import from '../importRelatedComponet/index';
import '../../style/holidaySetting.css';

import Top from './Top';
import Dialog from './Dialog';

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

	componentWillMount () {
		this.props.hrmHolidySettingNew.reset();
	}

	componentDidMount () {
		this.init()
	}

	componentWillReceiveProps (nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.props.hrmHolidySettingNew.refresh();
		}
	}

	init = () => {
		const {
			params
		} = this.props;

		const funcs = ['setAttendanceId', 'getPermissionInfo'];
		funcs.map((func, index) => {
			this.props.hrmHolidySettingNew[func](index === 0 && params);
		});
	}

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

		if (!hasRight) {
			return loading ? <Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@6q3cm2`} size='lg' /> : <AlertPage ecId={`${this && this.props && this.props.ecId || ''}_AlertPage@s1mo4g`} />
		} else {
			return (
				<div id='hrmHolidySettingNew'>
					<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@2kx7mg`} />
					<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@v0bvku`} />
					{importDialog.visible && <Import ecId={`${this && this.props && this.props.ecId || ''}_Import@k20s1s`} />}
				</div>
			)
		}
	}

}