import React, { ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, JSXElementConstructor, PropsWithChildren, ReactElement } from 'react';
import { ITheme } from '../theme';
import { CssResponsiveProps } from './css';

export type IArray = Array<IObject | string>;

export type IObject = {
  [key: string]: IObject | IArray | string;
};

export type ThemeProps = {
  theme: ITheme;
  className?: string;
};

// interface ExoticComponentWithDisplayName<P = unknown> extends React.ExoticComponent<P> { defaultProps?: Partial<P>; displayName?: string; }

// export type AnyComponent<P = unknown> = ExoticComponentWithDisplayName<P> | React.ComponentType<P>;

// export type KnownTarget = keyof React.JSX.IntrinsicElements | Element | AnyComponent;

// export type NativeElement = KnownTarget;

// export type NativeProps<T extends NativeElement, U> = Omit<React.HTMLAttributes<T>, keyof U> & { as?: ElementType<any>, children?: ReactNode };

// export type NativeThemeProps<T, U extends NativeElement> = NativeProps<U, T> & ThemeProps & T;

// export type ComponentProps<T, U extends NativeElement> = NativeThemeProps<T, U>;

// export type ComponentCssResponsiveProps<T, U extends NativeElement> = NativeThemeProps<T, U> & CssResponsiveProps;

// export type ComponentGridRowProps<T, U extends NativeElement> = NativeThemeProps<T, U> & GridRowProps;

// props
// Source: https://github.com/emotion-js/emotion/blob/main/packages/react/types/helper.d.ts
// A more precise version of just React.ComponentPropsWithoutRef on its own
export type PropsOf<C extends keyof React.JSX.IntrinsicElements | JSXElementConstructor<unknown>>
  = React.JSX.LibraryManagedAttributes<C, ComponentPropsWithoutRef<C>>;
// see
// https://www.benmvp.com/blog/polymorphic-react-components-typescript/
// https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/
// also
// https://scottbolinger.com/create-a-polymorphic-component-with-typescript-and-react/

// polymorphic

/**
 * 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.
 */
// export 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 (`C`) must be passed in.
*/
// export type InheritableElementProps<C extends ElementType, P = {}> = ExtendableProps<PropsOf<C>, P>;

/**
 * An override of the default HTML tag.
 * Can also be another React component.
 */
/*
type AsProp<C extends ElementType> = { as?: C; displayName?: string; };

type PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P);

export type PolymorphicComponentProp<C extends ElementType, P = {}> = React.PropsWithChildren<P & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, P>>;

export type PolymorphicComponentPropWithRef<C extends ElementType, P = {}> = PolymorphicComponentProp<C, P> & { ref?: PolymorphicRef<C> };
*/

export type AsProp<C extends ElementType = 'div'> = { as?: C; };

export type PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P);

export type PolymorphicComponentProp<C extends ElementType, Props = {}> = PropsWithChildren<Props & AsProp<C>> & Omit<ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;

export type PolymorphicComponentPropWithoutRef<C extends ElementType, Props = {}> = PolymorphicComponentProp<C, Props>;

export type PolymorphicComponentPropWithRef<C extends ElementType, Props = {}> = PolymorphicComponentProp<C, Props> & { ref?: PolymorphicRef<C> } & { displayName?: string; };

/**
 * Utility type to extract the `ref` prop from a polymorphic component
 */
export type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];

// generics

// export type UIDevProps = {};
export type UIDevProps = { displayName?: string };

export type UIStyledProps<P = {}> = CssResponsiveProps & P;

export type NativeAttrs<C extends ElementType = 'div', P = {}> = Omit<PropsOf<C>, keyof P>;

export type UIComponentProps<P = {}, C extends ElementType = 'div'> = P & NativeAttrs<C, P>;

export type UIStyledComponentProps<P = {}, C extends ElementType = 'div', S = UIStyledProps<P>> = S & NativeAttrs<C, S>;

export type UIComponentPropsWithoutRef<C extends ElementType, P> = PolymorphicComponentPropWithoutRef<C, P>;

export type UIComponentPropsWithRef<C extends ElementType, P> = PolymorphicComponentPropWithRef<C, P>;

export type UIStyledComponent<C extends ElementType, P = {}> = React.FC<Omit<ComponentProps<C>, keyof P>>;

export type UIStyledComponentPropsWithoutRef<T extends ElementType, P = {}> =
  UIComponentPropsWithoutRef<T, UIStyledComponentProps<P, T>> & { as?: ReactElement };

export type UIComponent<T extends ElementType, P = {}> = (
  <TT extends ElementType = T>(props: UIStyledComponentPropsWithoutRef<TT, P>) =>
    // Omit<UIElement<UIStyledComponentPropsWithoutRef<TT, P>>, 'ReactNode'>
    ReactElement<P> | null
);

export type UIStyledComponentPropsWithRef<T extends ElementType, P = {}> =
  UIComponentPropsWithRef<T, UIStyledComponentProps<P, T>>;

export type UIComponentWithRef<T extends ElementType, P = {}> = (
  <TT extends ElementType = T>(props: UIStyledComponentPropsWithRef<TT, P>) =>
    // UIElement<UIStyledComponentPropsWithRef<TT, P>>
    any
) & { displayName?: string };

// export type UIComponentWithRef<T extends ElementType, P> = React.FC<UIComponentPropsWithRef<T, UIStyledComponentProps<P, T>>>;

// export type UIForwardingComponentWithRef<T extends ElementType, P = {}> = <C extends ElementType = T>(props: P, ref?: PolymorphicRef<C>) => UIComponentWithRef<C, P>;

/*
type Props = {};

type ButtonProps<C extends ElementType> = PolymorphicComponentPropWithRef<C, Props> & CssResponsiveProps;

type ButtonComponent = <C extends ElementType = 'button'>(props: ButtonProps<C>) => ReactElement | null;

const PolymorphicButton: ButtonComponent = forwardRef(<C extends ElementType = 'button'>({ as, color, children, ...props }: ButtonProps<C>, ref?: PolymorphicRef<C>) => {
  const Component = as || 'button';
  return (
    <Component ref={ref} {...props}>
      {children}
    </Component>
  );
});
*/