import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaDialog,
} from 'ecCom';
import {
	MagicForm
} from '../../public/sweet-form.js';
import {
	Loading,
} from '../../public/learn.js';

@inject('hrmHolidySettingNew')
@observer
class Dialog extends React.Component {
	constructor(props) {
		super(props);
	}

	getContent = () => {
		const {
			hasDialogContentLoaded,
			formConfig,
			formElements,
			dialogType,
		} = this.props.hrmHolidySettingNew, {
			form
		} = formElements;

		const filterConfig = !['3', '4'].includes(dialogType) ? formConfig : {};

		if (hasDialogContentLoaded) {
			return (
				<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@pg8mld`} 
					{...filterConfig}
        			{...formElements} 
        			isFormInit={form.isFormInit}
        		/>
			)
		} else {
			return <Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@lilwep`} size='sm' />
		}
	}

	render() {
		const {
			dialog,
			dialogProps,
			dialogTitle,
			dialogButtons
		} = this.props.hrmHolidySettingNew;

		return (
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ak1ge9`}
				{...dialog}
				{...dialogProps}
				title={dialogTitle}
				buttons={dialogButtons}
			>
				{this.getContent()}
			</WeaDialog>
		);
	}
}

export default Dialog