import React from 'react';
import './checkbox.less';

/**\

    title: Checkbox
    category: atom
    description: creates a circular checkbox component
    props:
        value[Boolean]: whether the box is checked or not
        onChange[Function]:
            A callback for when the checkbox is toggled

\**/
class Checkbox extends React.Component {
    static defaultProps = {
        value: false
    };

    state = {
        value: false
    };

    constructor(props) {
        super(props);

        this.state.value = this.props.value;
    }

    componentWillReceiveProps(props) {
        /* istanbul ignore else: we dont care about the else */
        if (props && props.value !== undefined) {
            this.setState({ value: props.value });
        }
    }

    toggle() {
        const opposite = !this.state.value;

        this.setState({ value: opposite });

        if (typeof this.props.onChange === 'function') {
            this.props.onChange(opposite);
        }
    }

    render() {
        let classer = 'checkbox';

        if (this.state.value) {
            classer += ' active';
        }

        return (
            <div className={ classer }
                onClick={ this.toggle.bind(this) } >
            </div>
        );
    }
}

export default Checkbox;
