import {
	inject,
	observer,
} from 'mobx-react'

import React, {
	Component
} from 'react';

import {
	WeaFormItem,
	WeaHelpfulTip,
	WeaLocaleProvider,
} from 'ecCom'

import {
	WeaSwitch
} from 'comsMobx'

import {
	Spin
} from 'antd'

import {
	i18n
} from '../../public/i18n';

import * as mobx from 'mobx'
const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;

import PictureSetCopy from './PictureSetCopy'

@inject('hrmBirthdayRemindSet')
@observer
export default class EntryRemind extends Component {
	constructor(props) {
		super(props);
	}

	getForm() {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			entryRemind
		} = hrmBirthdayRemindSet, {
			form,
			condition
		} = entryRemind, {
			isFormInit
		} = form;

		let formParams = form.getFormParams();
		let arr = [];
		isFormInit && condition.map(c => {
			c.items.map((field, index) => {
				arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@fchoes@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: 6}}
                            wrapperCol={{span: 18}}
                            style={{padding:'5px 0'}}
                        >
                                {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@tclzvz@${index}`} fieldConfig={field} form={form} formParams={formParams} onChange={cb=>this.handleChange(cb)}/>}
                        		{field.domkey[0] == 'entryCongrats' && <div style={{float:'left',margin: 15}}><WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@ly9kzb@${index}`} title={getLabel(387043, '$years$：可替换成入职年限。 示例：$years$周年快乐！感谢你付出的每一天！')} /></div>}
                        </WeaFormItem>)
			})
		})

		arr.push(<PictureSetCopy ecId={`${this && this.props && this.props.ecId || ''}_PictureSetCopy@udkd0f`} />);

		return <div style={this.getStyle()} className='hrm-birthday-remind'>{arr}</div>
	}

	handleChange = (cb) => {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			setBirthGreeting,
			setGreetingColor,
			setFont,
			setFontSize,
		} = hrmBirthdayRemindSet;

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

		if (key == 'entryCongrats') setBirthGreeting(cb.entryCongrats.value, 'entryRemind');
		if (key == 'entryCongratsColor') setGreetingColor(cb.entryCongratsColor.value, 'entryRemind');
		if (key == 'entryFont') setFont(cb.entryFont.valueSpan);
		if (key == 'entryFontSize') setFontSize(cb.entryFontSize.value);
	}

	getStyle = () => {
		let style = {
			width: '70%'
		};

		const width = window.innerWidth || document.body.clientWidth;

		if (width > 1366) {
			Object.assign(style, {
				marginLeft: '28%'
			});
		} else {
			Object.assign(style, {
				marginLeft: '22%'
			});
		}

		return style;
	}

	render() {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			entryRemind,
		} = hrmBirthdayRemindSet, {
			loading
		} = entryRemind;

		if (loading) {
			return (
				<div className='hrm-loading-center'>
					<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@62pd68`} spinning={loading} size='large'></Spin>
				</div>
			)
		} else {
			return this.getForm()
		}

	}
}