import {
	WeaDialog,
	WeaFormItem,
	WeaNewScroll,
	WeaMoreButton,
} from 'ecCom'

import {
	Spin,
	Button,
} from 'antd'

import {
	WeaSwitch
} from 'comsMobx'

import {
	i18n
} from '../../public/i18n';
import {addContentPath} from '../../util/index.js'

export default class Editor extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			width: 700,
			height: 355,
		}
	}

	getButtons = () => {
		const {
			loading,
			save,
			isSaveButtonShow
		} = this.props;

		let buttons = [
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yaq11y`} type="primary" onClick={() => save()} disabled={loading || !isSaveButtonShow}>{i18n.button.save()}</Button>),
			(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@qtsm90`} />)
		];

		return buttons;
	}

	getForm() {
		const {
			form,
			condition,
			isFormInit,
			selectedValue,
			formType,
		} = this.props;

		let arr = [];
		isFormInit && condition.map((c, i) => {
			c.items.map((field, index) => {
				if (formType == 'new') {
					let key = field.domkey[0]
					if (selectedValue == '1' && key == 'hrmid') {
						return
					}
					if (selectedValue == '2' && key == 'roleid') {
						return
					}
				}
				arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@2weuoy@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: formType == 'new' && (index == 0 || index == 1) ? 0 : 7}}
                            error={form.getError(field)}
                            tipPosition="bottom"
                            wrapperCol={{span: formType == 'new' && (index == 0 || index == 1) ? 11 : formType == 'new' && (index == 2) ? 5 : 17}}
                        >
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@o5jctu@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} onChange={e => this.handleChange(e)}/>
                        </WeaFormItem>)
			})
			arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@eqyd2v@${i}`}
                            label={i18n.label.manageableModule()}
                            labelCol={{span: 7}}
                            wrapperCol={{span: 17}}
                        >
                                <div className='hrm-module-manage-checkbox'>{this.getCheckboxs()}</div>
                                <p style={{marginTop: 5}}>{`${i18n.label.onlySelectedAdmin()}${i18n.label.decentralizationLink()}`}<a href={addContentPath('/spa/hrm/engine.html#/hrmengine/admindecentralization')} target='_blank'>{i18n.label.decentralizationSet()}</a></p>
                        </WeaFormItem>)
		})
		return <div className={formType == 'new' ? "wea-form-item-group hrm-engine-module-manage-editor" : "wea-form-item-group"} style={formType == 'new' ? {} : {marginTop: -9}}>{arr}</div>
	}

	getCheckboxs = () => {
		const {
			checkboxCondition,
			checkboxForm,
			isCheckboxFormInit
		} = this.props;

		let arr = [];
		isCheckboxFormInit && checkboxCondition.map(c => {
			c.items.map((field, index) => {
				arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@5d9jh9@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: 0}}
                            wrapperCol={{span: 14}}
                        >
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@7utoi9@${index}`} fieldConfig={field} form={checkboxForm} formParams={checkboxForm.getFormParams()} onChange={e => this.handleCheckboxClick(e)}/>
                        </WeaFormItem>)
			})
		})

		return <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@5eoxtx`} height={170} style={{border: '1px solid #D9D9D9'}}>{arr}</WeaNewScroll>
	}

	handleChange = (e) => {
		const {
			setSelectedValue
		} = this.props;

		if (Object.keys(e)[0] == 'roleIdType') {
			setSelectedValue(e.roleIdType.value);
		}

	}

	handleCheckboxClick = (e) => {
		const {
			setDialogSaveButtonStatus,
			checkboxForm,
		} = this.props;

		let params = checkboxForm.getFormParams();
		if (this.isCheckboxSelected(params)) {
			setDialogSaveButtonStatus(true);
		} else {
			setDialogSaveButtonStatus(false);
		}
	}

	isCheckboxSelected = (params) => {
		let values = Object.values(params);
		let index = values.findIndex(value => value == '1');
		if (index > -1) {
			return true;
		} else {
			return false;
		}
	}

	render() {
		const {
			title,
			visible,
			loading,
			onCancel,
		} = this.props, {
			width,
			height,
		} = this.state;

		return (
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@9abzrp`}
                title={title}
                icon="icon-coms-hrm"
                iconBgcolor="#217346"
                visible={visible}
                hasScroll={true}
                onCancel={() => onCancel() }
                buttons={this.getButtons()}
                style={{width: width, height: height}}
                onChangeHeight={(h) => this.setState({height: h})}
            >
                {
                    loading ?   <div className='hrm-loading-center-small'>
                                   <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@8t2yk4`} spinning={loading}></Spin>
                                </div>
                            :   <div className='hrm-dialog-form'>
                                    {this.getForm()}
                                </div>
                }
            </WeaDialog>
		)

	}
}