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

import React, {
	Component
} from 'react';

import {
	WeaFormItem
} from 'ecCom'

import {
	WeaSwitch
} from 'comsMobx'

import {
	Spin
} from 'antd'

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

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

import PictureSet from './PictureSet'

@inject('hrmBirthdayRemindSet')
@observer
export default class EmployeeRemind extends Component {
	constructor(props) {
		super(props);
		this.state = {
			greetings: '',
		}
	}

	componentWillUnmount() {
		this.props.hrmBirthdayRemindSet.resetTabTwo();
	}

	getForm() {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			tabTwo,
			setRemindType,
			setBirthGreeting,
			setMultiple,
			setMultipleColor,
			setGreetingColor
		} = hrmBirthdayRemindSet, {
			condition,
			form,
			remindType,
			birthGreeting,
			multiple,
			multipleColor,
			greetingColor
		} = tabTwo, {
			isFormInit
		} = form;

		let formParams = form.getFormParams();
		let arr = [];
		isFormInit && condition.map(c => {
			c.items.map((field, index) => {
				let domkey = field.domkey[0];
				if (domkey == 'remindtype' && !remindType) setRemindType(field.value ? field.value : '1');
				if (domkey == 'greetings' && !this.state.greetings) this.setState({
					greetings: field.value
				});
				if (domkey == 'greetings2' && !birthGreeting) setBirthGreeting(field.value);
				if (domkey == 'showtitle2' && !multiple) setMultiple(field.value);
				if (domkey == 'colColor' && !multipleColor) setMultipleColor(field.value);
				if (domkey == 'greColor' && !greetingColor) setGreetingColor(field.value);

				if (index > 1) {
					if (!this.isPass(domkey)) {
						return;
					}
				}
				arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@eto8an@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: 6}}
                            wrapperCol={{span: 18}}
                            error={form.getError(field)}
                            tipPosition="bottom"
                            style={{padding:'5px 0'}}
                        >
                                {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@qxol08@${index}`} fieldConfig={field} form={form} formParams={formParams} onChange={(e)=>this.handleClick(e)}/>}
                        </WeaFormItem>)
			})
		})
		if (remindType == '1') {
			arr.push(this.preView());
		} else {
			arr.push(<PictureSet ecId={`${this && this.props && this.props.ecId || ''}_PictureSet@067b1a`} />);
		}
		return <div style={this.getStyle()} class='hrm-birthday-remind'>{arr}</div>
	}

	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;
	}

	preView() {
		const {
			greetings
		} = this.state;

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@d9zani`}
                label={i18n.label.preview()}
                labelCol={{span: 6}}
                wrapperCol={{span: 18}}
            >
                <div style={{padding:6, width: 440, border: '1px solid #D9D9D9'}}>{greetings}</div>
            </WeaFormItem>
		)
	}

	handleClick(e) {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			setRemindType,
			setBirthGreeting,
			setMultiple,
			setMultipleColor,
			setGreetingColor,
		} = hrmBirthdayRemindSet;

		let keys = Object.keys(e);

		switch (keys[0]) {
			case 'remindtype':
				setRemindType(e.remindtype.value);
				break;
			case 'greetings':
				this.setState({
					greetings: e.greetings.value
				});
				break;
			case 'greetings2':
				setBirthGreeting(e.greetings2.value);
				break;
			case 'showtitle2':
				setMultiple(e.showtitle2.value);
				break;
			case 'colColor':
				setMultipleColor(e.colColor.value);
				break;
			case 'greColor':
				setGreetingColor(e.greColor.value);
				break;
		}
	}


	isPass(domkey) {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			tabTwo
		} = hrmBirthdayRemindSet, {
			remindType
		} = tabTwo;

		if (remindType == '1') {
			if (domkey == 'showtitle2' || domkey == 'greetings2' || domkey == 'colColor' || domkey == 'greColor') return false
		} else if (remindType == '2') {
			if (domkey == 'showtitle' || domkey == 'greetings') return false;
		}
		return true;
	}

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

		if (loading) {
			return (
				<div style={{textAlign:'center',padding: '200px 0'}}>
					<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@wb9thq`} spinning={loading} size='large'></Spin>
				</div>
			)
		} else {
			return this.getForm()
		}

	}
}