/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
import useTheme from '../useTheme';
import defaultTheme from '../values/default.theme';

const withThemeCreator = () => {
  const withTheme = (Component) => {
    const WithTheme = React.forwardRef(function WithTheme(props, ref) {
      const { ...other } = props;
      const theme = useTheme() || defaultTheme;

      return <Component theme={theme} ref={ref} {...other} />;
    });
    WithTheme.displayName = Component.displayName;
    hoistNonReactStatics(WithTheme, Component);

    return WithTheme;
  };

  return withTheme;
};

// Provide the theme object as a prop to the input component.
// It's an alternative API to useTheme().
// We encourage the usage of useTheme() where possible.
const withTheme = withThemeCreator();

export default withTheme;