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 HTKeyForm extends Component {
	row = [{
		key: 'mobileScanCA',
		className: 'switch',
		children: []
	}];


	renderItem = () => {
		const {
			group,
			store
		} = this.props;
		const {
			advanceSettingForm: form,
			sync
		} = store;
		const formParams = form.getFormParams();
		const opened = (formParams['needusbHt'] === '' || formParams['needusbHt'] === '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, index) => {
			const children = [],
				fields = map.get(r.key.toLowerCase());

			r.children.map(child => {
				switch (child.key) {
					case 'sync':
						const params = {
							needusbHt: formParams['needusbHt'],
							needusbdefaultHt: formParams['needusbdefaultHt']
						}
						children.push(
							<div className="multi">
								<Button onClick={() => sync('synusbsetdefaultHt', 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,
			});
		});

		!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();
	}
}