import React from 'react';
import {
	inject,
	observer,
} from 'mobx-react';
import {
	MagicForm,
} from '../../public/sweet-form.js';
import Picture from './Picture';
import Upload from './Upload';
import PreView from './PreView';

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

	render() {
		const {
			hrmStaffCareReminder
		} = this.props, {
			formElements,
			entryFormConfig,
		} = hrmStaffCareReminder, {
			form,
			loading
		} = formElements;

		const wrapperStyle = {
			padding: '20px 25%'
		};

		return (
			<div>
				<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@gr6agi`} 
					{...entryFormConfig}
					{...formElements} 
					isFormInit={form.isFormInit}
					wrapperStyle={wrapperStyle}/> {
					form.isFormInit && (<div>
							<Picture ecId={`${this && this.props && this.props.ecId || ''}_Picture@hnqnyh`} wrapperStyle={wrapperStyle}/>
							<Upload ecId={`${this && this.props && this.props.ecId || ''}_Upload@vfpa7h`} wrapperStyle={wrapperStyle}/>
							<PreView ecId={`${this && this.props && this.props.ecId || ''}_PreView@kqlxs1`} wrapperStyle={wrapperStyle} />
						</div>)
				} 
				</div>
		)
	}
}

export default EntryRemind