import React from 'react';
import debounce from 'lodash/debounce';

/**
 * Usage example:
 * export default rerenderOnResize()(Header);
 */
export default () => (WrappedComponent) => {
  class ReRenderOnResize extends React.PureComponent {
    componentDidMount() {
      this.callback = debounce(this.rerender, 100);
      window.addEventListener('resize', this.callback);
    }

    componentWillUnmount() {
      window.removeEventListener('resize', this.callback);
    }

    rerender = () => {
      this.forceUpdate();
    };

    render() {
      const props = { ...this.props };
      return <WrappedComponent {...props} />;
    }
  }

  return ReRenderOnResize;
};