// Type definitions for agate/ThemeDecorator

import { FloatingLayerDecoratorProps as ui_FloatingLayer_FloatingLayerDecoratorProps } from "@enact/ui/FloatingLayer";
import { ResolutionDecoratorProps as ui_resolution_ResolutionDecoratorProps } from "@enact/ui/resolution";
import { SpotlightRootDecoratorProps as spotlight_SpotlightRootDecorator_SpotlightRootDecoratorProps } from "@enact/spotlight/SpotlightRootDecorator";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface ThemeDecoratorConfig extends Object {
  /**
   * Enables customization of a skin's highlight and accent color.
   */
  customSkin?: boolean;
  /**
   * Disables use of full screen.
   */
  disableFullscreen?: boolean;
  /**
   * Enables a floating layer for popup components.
   *
   * If  `false` , app will be responsible for applying the decorator.
   */
  float?: boolean;
  /**
   * Applies I18nDecorator.
   *
   * If  `false` , app will be responsible for applying the decorator.
   */
  i18n?: boolean;
  /**
   * Disables setting spotlight focus on first render.
   */
  noAutoFocus?: boolean;
  /**
   * Enables overlay mode (no background color will be applied).
   */
  overlay?: boolean;
  /**
   * Override the resolution independence settings.
   */
  ri?: object;
  /**
   * Specifies the id of the React DOM tree root node
   */
  rootId?: string;
  /**
   * Applies skinning support.
   */
  skin?: boolean;
  /**
   * Applies spotlight decorator.
   *
   * If  `false` , app will be responsible for applying the decorator.
   */
  spotlight?: boolean;
}
export interface ThemeDecoratorProps
  extends Merge<
    Merge<
      Merge<
        ui_FloatingLayer_FloatingLayerDecoratorProps,
        ui_resolution_ResolutionDecoratorProps
      >,
      spotlight_SpotlightRootDecorator_SpotlightRootDecoratorProps
    >,
    agate_Skinnable_SkinnableProps
  > {
  /**
   * A custom accent color, as a hex string.
   */
  accent?: string;
  /**
   * A custom highlight color, as a hex string.
   */
  highlight?: string;
  /**
   * The name of the skin a component should use to render itself.
   */
  skin?: string;
}
export function ThemeDecorator<P>(
  config: ThemeDecoratorConfig,
  Component: React.ComponentType<P> | string
): React.ComponentType<P & ThemeDecoratorProps>;

export function ThemeDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & ThemeDecoratorProps>;

export default ThemeDecorator;
