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 DynamicTokenForm extends Component {
	row = [{
		key: 'needusbDt',
		className: 'switch',
		children: []
	}, {
		key: 'needusbdefaultDt',
		className: 'oneColInput',
		children: [{
			key: 'sync'
		}, {
			key: 'helper',
			info: i18n.label.syncDynamicTokenHelper
		}]
	}];


	renderItem = () => {
		const {
			group,
			store
		} = this.props;
		const {
			advanceSettingForm: form,
			sync
		} = store;
		const formParams = form.getFormParams();
		const opened = (formParams['needusbDt'] === '' || formParams['needusbDt'] === '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 = {
							needusbDt: formParams['needusbDt'],
							needusbdefaultDt: formParams['needusbdefaultDt']
						}
						children.push(
							<div className="multi">
								<Button onClick={() => sync('synusbsetdefaultDt', 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 form={form} fields={fields} keys={[fields]}>
                    	<div className="formItem">
                    		<div className={r.className}>
                    			<WeaSwitch fieldConfig={fields} form={form} />
                    		</div>
                    		{children}
                    	</div>
					</CustomerFormItem>
				),
				colSpan: 1,
			});
		});


		!opened && items.splice(1, items.length);

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

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