const Habanero = props => <div>{props.children}</div>;

    const Testing = Component => {
        return class extends React.Component {
            constructor(props) {
                super(props);

                this.state = {
                    test: null
                }
            }

            setTimer = () => {
                if (this._timer != null) {
                    clearTimeout(this._timer)
                }

                this._timer = setTimeout(() => {
                    this.setState({test: null});
                    this._timer = null;
                }, 1600);
            };

            componentWillUnmount() {
                clearTimeout(this._timer);
            }

            /*shouldComponentUpdate(nextProps) {
                if (nextProps.odds !== this.props.odds) {
                    console.log(nextProps, this.props);

                    const change = nextProps.odds > this.props.odds ? "up" : "down";

                    this.setTimer();

                    this.setState({test: change});
                }

                return true;
            }*/

            //
            // static getDerivedStateFromProps(props, state) {
            //     console.log(props);
            //}

            getSnapshotBeforeUpdate(prevProps) {
                if(prevProps.odds === this.props.odds) return null;

                return prevProps.odds < this.props.odds ? "up" : "down";
            }

            componentDidUpdate(prevProps, prevState, snapshot) {
                if(snapshot) {
                    console.log(snapshot);

                    this.setTimer();

                    this.setState({test: snapshot});
                }

                console.log("updated");
            }

            render() {
                const {odds, ...rest} = this.props;
                const child = this.state.test ? <div className={`odds odds--${this.state.test}`}></div> : undefined;

                return <Component {...rest}>
                    {child}
                </Component>
            }
        }
    };

    const Asd = Testing(Habanero);

    return (
        <Wrapper
            render={({increment, decrement, count}) => (
                <div>
                    <div>
                        <h3>Render Props Counter</h3>
                        <Asd odds={count}/>
                    </div>
                    <div>
                        <div>{count}</div>
                        <button onClick={() => increment()}>Increment</button>
                        <button onClick={() => decrement()}>Decrement</button>
                    </div>
                </div>
            )}
        >
            {alabala => (
                <div>Zakkie, u r the best{alabala}</div>
            )}
        </Wrapper>)
};

class Wrapper extends React.Component {
    state = {
        count: 0
    };

    // Increase count
    increment = () => {
        const { count } = this.state;
        return this.setState({ count: count + 1 });
    };

    // Decrease count
    decrement = () => {
        const { count } = this.state;
        return this.setState({ count: count - 1 });
    };

    render() {
        const { count } = this.state;

        return (
            <div>
                {this.props.render({
                    increment: this.increment,
                    decrement: this.decrement,
                    count: count
                })}
                {this.props.children("!!!")}
            </div>
        );
    }
};

export default Wrapper;