import React, { Component, createRef, forwardRef } from 'react';
import hoistStatics from 'hoist-non-react-statics';

function hoist(WrappedComponent) {
	return function createHoistedComponent(TargetComponent) {
		const HoistedComponent = forwardRef((props, ref) => (
			<TargetComponent {...props} forwardedRef={ref} />
		));

		if (WrappedComponent) {
			HoistedComponent.displayName = `hoisted(${WrappedComponent.displayName})`;
			hoistStatics(HoistedComponent, WrappedComponent /* , { render: true } */);
		}

		return HoistedComponent;
	};
}

function extraPropsHoc(extra) {
	return (WrappedComponent) => {
		@hoist(WrappedComponent)
		class Bar extends Component {
			render() {
				const { forwardedRef, ...props } = this.props;
				return <WrappedComponent {...props} {...extra} ref={forwardedRef} />;
			}
		}
		return Bar;
	};
}

@extraPropsHoc({ foo: 'foo' })
@extraPropsHoc({ bar: 'bar' })
class Foo extends Component {
	static displayName = 'Foo';

	log() {
		console.log('this.props', this.props);
	}

	render() {
		return <h1>Hello</h1>;
	}
}

export default class App extends Component {
	ref = createRef();

	componentDidMount() {
		this.ref.current.log();
	}

	render() {
		return <Foo ref={this.ref} />;
	}
}