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 EmployeeRemind extends React.Component {
	constructor(props) {
		super(props);
	}

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

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

		const remindtype = form.getFormParams().remindtype;

		return (
			<div>
				<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@wybx0a`} {...formConfig} {...formElements} isFormInit={form.isFormInit} wrapperStyle={wrapperStyle}/>
				{
					form.isFormInit && remindtype === '2' && (<div>
						<Picture ecId={`${this && this.props && this.props.ecId || ''}_Picture@j63lpm`} wrapperStyle={wrapperStyle}/>
						<Upload ecId={`${this && this.props && this.props.ecId || ''}_Upload@thc0bl`} wrapperStyle={wrapperStyle}/>
						<PreView ecId={`${this && this.props && this.props.ecId || ''}_PreView@mix6jj`} wrapperStyle={wrapperStyle} />
					 </div>)
				}
			</div>
		)
	}
}

export default EmployeeRemind