import React from "react";

declare module "react" {
  function forwardRef<T, P = {}>(
    render: (props: P, ref: React.Ref<T>) => React.ReactElement<P> | null
  ): (props: P & React.RefAttributes<T>) => React.ReactElement<P>;
}

//  Polymorphic with ref

export type PropsOf<
  T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
> = JSX.LibraryManagedAttributes<T, React.ComponentPropsWithRef<T>>;
type ComponentProp<E extends React.ElementType> = {
  /**
   * An override of the default HTML tag,
   * can also be another React Component.
   */
  component?: E;
};

/**
 * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
 * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
 * set of props.
 */
type ExtendableProps<ExtendedProps = {}, OverrideProps = {}> = OverrideProps &
  Omit<ExtendedProps, keyof OverrideProps>;

/**
 * Allows for inheriting the props from the specified element type so that
 * props like children, className & style work, as well as element-specific
 * attributes like aria roles. The component (`E`) must be passed in.
 */
type InheritableElementProps<
  E extends React.ElementType,
  Props = {}
> = ExtendableProps<PropsOf<E>, Props>;

/**
 * A more sophisticated version of `InheritableElementProps` where
 * the passed in `component` prop will determine which props can be included
 */
export type PolymorphicWithRef<
  E extends React.ElementType,
  Props = {}
> = InheritableElementProps<E, Props & ComponentProp<E>>;