import "./stateBar.scss";

import React, {Component} from "react";
import classNames from "classnames";

export default class StateBar extends Component {
    state = {
        enable: this.props.enable
    };
    toggle = () => {
        const {enable} = this.state;
        this.setState({enable: !enable}, () => {
           this.props.onChange &&  this.props.onChange(this.state.enable)
        });
    };
    componentWillReceiveProps(nextProps, nextContext) {
        if(nextProps.enable !== this.state.enable) {
            this.setState({enable: nextProps.enable})
        }
    }

    render() {
        const {enable} = this.state;
        return (
            <div
                className={classNames({
                    "stateBar": true,
                    "active": enable
                })}
                onClick={this.toggle}
            >
                <div className="stateBar-indicator"/>
            </div>
        )
    }
}