import React, {
	Component
} from 'react';

import {
	WeaFormItem,
	WeaSearchGroup,
	WeaError
} from 'ecCom';

import {
	WeaSwitch
} from 'comsMobx'

import {
	Row,
	Col,
	message
} from 'antd';

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

@observer
export default class LoginSettingForm extends Component {
	constructor(props) {
		super(props);
		this.state = {
			needvalidate: false
		}
	}
	row = [{
		key: 'relogin',
		className: 'switch',
		children: []
	}, {
		key: 'forbidLogin',
		className: 'switch',
		children: [{
			key: 'linkTo'
		}]
	}, {
		key: 'needvalidate',
		className: 'switch',
		children: []
	}, {
		key: 'validatetype',
		className: 'oneColInput-dropdown',
		children: [],
		checkSwitch: 'needvalidate'
	}, {
		key: 'validatenum',
		className: 'oneColInput-dropdown',
		children: [],
		checkSwitch: 'needvalidate'
	}];


	renderItem = () => {
		const {
			group,
			store
		} = this.props;
		const {
			tabIndex,
			basicSettingForm: form,
			verificationCode,
			refreshVerificationCode,
			onItemChange,
			tabConfig
		} = store;
		const formParams = form.getFormParams();
		const items = [],
			children = [];

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

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

			r.children && r.children.length > 0 && r.children.map(child => {
				if (child.key === 'linkTo') {
					children.push(
						<div className="multi">
							<div><p>{i18n.label.beforeActive()}<a onClick={this.redirectToNetworkSettingTab}>{i18n.label.setNetworkStrategy()}</a></p></div>
						</div>
					);
				} else {
					const fields = map.get(child.key.toLowerCase());
					if (!_.isEmpty(fields)) {
						children.push(
							<div className="multi">
							<div>{child.label}</div>
							<div className={child.className}>
								<WeaSwitch fieldConfig={fields} form={form} />
							</div>
							<div>{child.info}</div>
						</div>
						);
						keys.push(fields);
					}
				}
			})

			if (r.key === 'forbidLogin' && tabConfig.tabs.length < 3) {

			} else if (!r.checkSwitch || formParams[r.checkSwitch] === '1') {
				items.push({
					com: (
						<CustomerFormItem fields={fields} form={form} keys={keys}>
	                    	<div className="formItem">
	                    		<div className={r.className}>
	                    			<WeaSwitch fieldConfig={fields} form={form} onChange={onItemChange} />
	                    		</div>
	                    		{children}
	                    	</div>
						</CustomerFormItem>
					),
					colSpan: 1,
				});
			}
		});

		map.get('needvalidate') && map.get('needvalidate').value != undefined && this.setState({
			needvalidate: map.get('needvalidate').value === '0' ? false : true
		});

		if (!_.isEmpty(formParams) && formParams['needvalidate'] === '1') {
			const verificationCodePreview = {
				label: i18n.label.preview(),
				labelcol: 8,
				fieldcol: 16
			}

			items.push({
				com: (
					<CustomerFormItem fields={verificationCodePreview}>
						<div className="formItem">
		              		<div className="multi">
		              			<img border="0" align='absmiddle' src={verificationCode} onClick={() => refreshVerificationCode(formParams)} title={i18n.label.preview()} />
		              		</div>
		              	</div>
					</CustomerFormItem>
				),
				colSpan: 1
			});
		}

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

	redirectToNetworkSettingTab = () => {
		const {
			store
		} = this.props;
		const {
			setActiveTab,
			tabConfig
		} = store;
		if (tabConfig.tabs.length > 2)
			setActiveTab('3');
		else
			message.error(i18n.message.authFailed());
	}

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