import { createElement, ComponentType, forwardRef } from 'rax';
import { StyleProviderFunction, StyleType, StyledComponentProps, useStyles } from './hooks';

export default function withStyles<T extends StyleType, P extends StyledComponentProps<T>>(
  Component: ComponentType<P>,
  styleProvider: StyleProviderFunction,
) {
  return forwardRef<P, any>((props, ref) => {
    let classNames;
    useStyles(styleProvider, props, (c) => {
      classNames = c;
      return {};
    });

    return (
      <Component {...props} classNames={classNames} ref={ref} />
    );
  });
}