import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaCheckbox
} from 'ecCom';
import {
	toJS
} from 'mobx';

@inject('hrmVacationBalanceReportCopy')
@observer
class CheckboxGroup extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const {
			hrmVacationBalanceReportCopy
		} = this.props, {
			checkboxConfig,
			checkedItems,
			collectCheckedItem,
		} = hrmVacationBalanceReportCopy;

		return (
			<div style={{padding: '2px 0 10px 2px'}}>{
				toJS(checkboxConfig).map((opt, i) => {
					if (Array.isArray(opt)) {
						return (
							<div>{opt.map((obj, index) => {
								const {
									key,
									showname
								} = obj;
								return (
									<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@rfr3v6@${index}`} id={key} content={showname} value={checkedItems.includes(key)} onChange={val => collectCheckedItem(val,key)}/>
								)
							})}</div>
						)
					} else {
						const {
							key,
							showname
						} = opt;

						return (
							<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@lpuvz8@${i}`} id={key} content={showname} value={checkedItems.includes(key)} onChange={val => collectCheckedItem(val,key)}/>
						)
					}
				})
			}</div>
		);
	}
}

export default CheckboxGroup