import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop,
	WeaRightMenu,
} from 'ecCom';
import {
	CompositeForm,
} from '../../public/sweet-form.js';
import {
	Loading,
} from '../../public/learn';
import TimeSelectionSetting from '../timeSelection';

@inject('commonStore')
@inject('hrmTravelRule')
@observer
class Top extends React.Component {
	constructor(props) {
		super(props);
	}

	componentDidMount () {
		['getMenus', 'getFormMaterial'].map(f => {
			this.props.commonStore[f]();
		});
	}

	handleFormChange = (cb) => {
		const {
			formElements,
		} = this.props.commonStore, {
			form,
		} = formElements;

		const key = Object.keys(cb)[0];
		const value = cb[key].value;

		if ((key === 'minimumUnit' && ['3', '4'].includes(value)) || (key === 'computingMode' && value === '1')) {
			form.updateFields({
				hoursToDay: {
					value: 8
				}
			});
		}
		if ((key === 'exit_minimumUnit' && ['3', '4'].includes(value)) || (key === 'exit_computingMode' && value === '1')) {
			form.updateFields({
				hoursToDay: {
					value: 8
				}
			});
		}

		if (['minimumUnit', 'exit_minimumUnit'].includes(key)) {
			this.props.hrmTravelRule.handleMinimumUnithange(key, value)
		}
	}

	getWrapperStyle = () => {
		const width = window.innerWidth || document.body.clientWidth;

		if (width < 1366) {
			return {
				padding: '20px 20%'
			}
		} else {
			return {
				padding: '20px 33%'
			}
		}
	}

	render () {
		const {
			commonStore,
			hrmTravelRule
		} = this.props, {
			topTitle,
		} = hrmTravelRule, {
			topButtons,
			dropMenuDatas,
			topComponentStaticProps,
			formElements,
		} = commonStore, {
			formConfig,
			dynamicTips,
			staticTips,
			renderBlacklist,
			timeSelectionDialog,
			formTarget
		} = hrmTravelRule, {
			form,
			loading,
		} = formElements;

		return (
			<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@lmynyf`}
				{...topTitle}
				loading={loading}
				buttons={topButtons}
				dropMenuDatas={dropMenuDatas}
				{...topComponentStaticProps}
			>
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@nxjx6r`} datas={dropMenuDatas}>
					{
						loading
							? <Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@27zj5z`} size='sm' />
							: <CompositeForm ecId={`${this && this.props && this.props.ecId || ''}_CompositeForm@rgfihx`}
								{...formElements}
								{...formConfig}
								wrapperStyle={this.getWrapperStyle()}
								dynamicTips={dynamicTips}
								staticTips={staticTips}
								renderBlacklist={renderBlacklist}
								isFormInit={form.isFormInit}
								onFormElementsChange={this.handleFormChange}
							/>
					}
				</WeaRightMenu>
				<TimeSelectionSetting ecId={`${this && this.props && this.props.ecId || ''}_TimeSelectionSetting@bk4nzq`} dialog={timeSelectionDialog} formTarget={formTarget} />
			</WeaTop>
		)
	}
}

export default Top