import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
import Translation from '../../../behaviours/translation';
import Material from '../../../behaviours/material';

const propTypes = {
    label: PropTypes.string,
    onChange: PropTypes.func.isRequired,
    value: PropTypes.bool.isRequired
};

const defaultProps = {
    value: false
};

const displayName = 'InputCheckBox';

@Translation
@Material('mdlHolder')
class InputCheckBox extends Component {
    getValue = () => {
        const domElement = ReactDOM.findDOMNode(this.refs.checkbox);
        return domElement.checked;
    }

    handleOnChange = ({target: {checked}}) => {
        const {onChange} = this.props;
        onChange(checked);
    }

    render() {
        const {label, value} = this.props;
        return (
            <label className='mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect' data-focus='input-checkbox' ref='mdlHolder'>
                <input checked={value} className='mdl-checkbox__input' onChange={this.handleOnChange} ref='checkbox' type='checkbox' />
                {label && <span className='mdl-checkbox__label'>{this.i18n(label)}</span>}
            </label>
        );
    }
}

InputCheckBox.propTypes = propTypes;
InputCheckBox.defaultProps = defaultProps;
InputCheckBox.displayName = displayName;

export default InputCheckBox;

@@ -610,24 +610,293 @@
 ked;%0A    %7D%0A%0A
+    componentDidUpdate = () =%3E %7B%0A        const %7Bvalue%7D = this.props;%0A        const method = value ? 'add' : 'remove';%0A        const node = ReactDOM.findDOMNode(this.refs.mdlHolder);%0A        if (node) %7B%0A            node.classList%5Bmethod%5D('is-checked');%0A        %7D%0A    %7D%0A%0A
     handleOn
@@ -1100,33 +1100,34 @@
 label className=
-'
+%7B%60
 mdl-checkbox mdl
@@ -1159,17 +1159,18 @@
 e-effect
-'
+%60%7D
  data-fo
@@ -1339,17 +1339,16 @@
 heckbox'
- 
 /%3E%0A     

Fix #614