import React, {
	Component
} from 'react';

import {
	WeaFormItem,
	WeaSearchGroup,
	WeaHelpfulTip,
	WeaError
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx'
import {
	Row,
	Col,
	Button
} from 'antd';

import {
	observer
} from 'mobx-react';
import CustomerFormItem from './CustomerFormItem';
import _ from 'lodash';
import {
	i18n
} from '../../public/i18n';

@observer
export default class DynamicPasswordForm extends Component {
	row = [{
		key: 'needdynapass',
		className: 'switch',
		children: []
	}, {
		key: 'needdynapassdefault',
		className: 'oneColInput',
		children: [{
			key: 'sync'
		}, {
			key: 'helper',
			info: i18n.label.syncDynamicPasswordHelper
		}]
	}, {
		key: 'dynapasslen',
		className: 'oneColInput',
		children: []
	}, {
		key: 'dypadcon',
		className: 'oneColInput',
		children: []
	}, {
		key: 'validitySec',
		className: 'oneColInput',
		children: []
	}];


	renderItem = () => {
		window.e9HideFormFieldKeys = [];
		const {
			group,
			store
		} = this.props;
		const {
			advanceSettingForm: form,
			sync
		} = store;
		const formParams = form.getFormParams();
		const opened = (formParams['needdynapass'] === '' || formParams['needdynapass'] === '0') ? false : true;
		let items = [],
			children = [];

		const map = new Map();
		group.items.map(fields => {
			map.set(fields.domkey[0].toLowerCase(), fields);
		});

		this.row.map(r => {
			const children = [],
				fields = map.get(r.key.toLowerCase());

			r.children.map(child => {
				switch (child.key) {
					case 'sync':
						const params = {
							needdynapass: formParams['needdynapass'],
							needdynapassdefault: formParams['needdynapassdefault']
						}
						children.push(
							<div className="multi">
								<Button onClick={() => sync('syndynapassdefault', params)}>{i18n.button.sync()}</Button>
							</div>
						);
						break;
					case 'helper':
						children.push(
							<div className="multi">
								<div><WeaHelpfulTip title={child.info && child.info()} /></div> 
							</div>
						);
						break;
					default:
						break;
				}
			});

			items.push({
				com: (
					<CustomerFormItem fields={fields} form={form} keys={[fields]}>
                    	<div className="formItem">
                    		<div className={r.className}>
                				<WeaSwitch fieldConfig={fields} form={form} />
                    		</div>
							{children}
                    	</div>
					</CustomerFormItem>
				),
				colSpan: 1,
			});
		});

		if (opened) {
			window.e9HideFormFieldKeys = [];
		} else {
			window.e9HideFormFieldKeys = ['needdynapassdefault', 'dynapasslen', 'dypadcon', 'validitySec'];
			items.splice(1, items.length);
		}


		return <WeaSearchGroup needTigger={true} title={group.title} col={1} showGroup={group.defaultshow} items={items} />
	}

	render() {
		const {
			store
		} = this.props;
		const {
			rDate
		} = store;
		return this.renderItem();
	}
}