const Checkbox = (props) => {

	const fields = [
		'name',
		'id',
		'disabled',
		'placeholder',
		'required',
	]

 	const onChangeVal = evt => {

 		const { name, checked } = evt.target
 			, { onChange, type } = props

		if (typeof onChange === 'function') {
			onChange(name, (checked == true || checked == 'on') ? true : false)
		}
	}

	const attrs = {
		className: 'form-check-input' + (props.inputClassName || ''),
		onChange: onChangeVal,
		checked: props.value == true ? true : false
	}

	fields.forEach(field => attrs[field] = props[field])

    return  <input type="checkbox" {...attrs} />
}

class CheckboxWrapper extends React.Component {

	state = {
		id: 'checkbox_' + Date.now()
	}

	render () {

		const { className, label, error } = this.props

		return (

			<div className={`form-check ${className || ''}`}>
				<Checkbox {...this.props} id={this.state.id}/>
				<label className="form-check-label" htmlFor={this.state.id}>{label}</label>
				{error && <span className="error">{error}</span>}
			</div>
		)
	}
}

export default CheckboxWrapper