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

/**\

    title: Switch
    category: atom
    description:
        A big, brand indexed, sliding toggle switch
    props:
        onChange[Function]: A callback for the toggle event
        value[Boolean]: Whether or not the toggle is active

\**/
class Switch 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 = 'switch';

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

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

export default Switch;
