import React, {
	Component
} from 'react';
import {
	WeaFormItem,
} from 'ecCom'
import {
	WeaSwitch
} from 'comsMobx'
import _ from 'lodash';
import FormInfo from '../../coms/FormInfo';
import IPAddress from './IPAddress';
import {
	i18n
} from '../../public/i18n';

export default class NetworkFormInfo extends FormInfo {
	constructor(props) {
		super(props);
	}

	renderFormItem = () => {
		const {
			formFields,
			form
		} = this.props;
		let formParams = form.getFormParams();
		let formGroupArr = [],
			formItemArr = [];

		const fields = _.chunk(formFields[0].items, 4);
		fields.map((t, index) => {
			if (t.length === 1) {
				formItemArr.push(<WeaFormItem
							error={form.getError(t[0])}
                            label={`${t[0].label}`}
                            labelCol={{span: `${t[0].labelcol}`}}
                            error={form.getError(t[0])}
                            wrapperCol={{span: `${t[0].fieldcol}`}}>
                                <WeaSwitch fieldConfig={t[0]} form={form} formParams={formParams} />
                        </WeaFormItem>)
			} else {
				const formItemLabel = index === 0 ? i18n.label.startIPAddress() : i18n.label.endIPAddress();
				let errorMsg = '';
				t.map(f => {
					form.getError(f) && (errorMsg = `${formItemLabel} ${i18n.label.unfilled()}`)
				})
				formItemArr.push(<WeaFormItem
							error={errorMsg}
                            label={formItemLabel}
                            labelCol={{span: `${t[0].labelcol}`}}
                            wrapperCol={{span: `${t[0].fieldcol}`}}>
							<IPAddress filds={t} form={form} />
                        </WeaFormItem>)
			}
		})

		return {
			formGroupArr,
			formItemArr
		};
	}
}