import React from 'react';
import {
	observer,
	inject
} from 'mobx-react';
import {
	Authority,
	Top,
	MagicForm,
} from '../../public/valhalla/components/index.js';
import '../../style/applicationSettings.less';

@inject('applicationSettingsStore')
@observer
export default class ApplicationSettings extends React.Component {
	componentWillMount() {
		this.props.applicationSettingsStore.preMount();
	}

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

	componentDidMount() {
		this.init();
	}

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

		init();
	}
	
	render() {
		const {
			applicationSettingsStore
		} = this.props, {
			authorityStore,
			topStore,
			formStore,
		} = applicationSettingsStore;

		return (
			<div className='hrm-kq-application-settings'>
				<Authority ecId={`${this && this.props && this.props.ecId || ''}_Authority@162dpe`} store={authorityStore}>
					<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@hlpd9i`} store={topStore}>
						<div className='content'>
							<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@shp38n`} store={formStore} />
						</div>
					</Top>
				</Authority>
			</div>
		);
	}
}