// Type definitions for agate/Heading

import { HeadingProps as ui_Heading_HeadingProps } from "@enact/ui/Heading";
import * as React from "react";
import { MarqueeDecoratorProps as agate_Marquee_MarqueeDecoratorProps } from "@enact/agate/Marquee";
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 HeadingBaseProps extends ui_Heading_HeadingProps {
  /**
 * Set a custom color to be used by the Heading when  `size`  is "title".
Defaults to the current accent color if none is specified.
 */
  color?: string;
  /**
   * Adds a horizontal-rule (line) under the component
   */
  showLine?: boolean;
  /**
   * The size of the spacing around the Heading.
   *
   * Allowed values include:
   * *  `'auto'`  - Value is based on the  `size`  prop for automatic usage.
   * *  `'title'`  - Specifically assign the  `'title'`  spacing.
   * *  `'large'`  - Specifically assign the  `'large'`  spacing.
   * *  `'medium'`  - Specifically assign the  `'medium'`  spacing.
   * *  `'small'`  - Specifically assign the  `'small'`  spacing.
   * *  `'none'`  - No spacing at all. Neighboring elements will directly touch the Heading.
   */
  spacing?: "auto" | "title" | "large" | "medium" | "small" | "none";
}
/**
 * A labeled Heading component.
 * 
 * This component is most often not used directly but may be composed within another component as it
is within  Heading  .
 */

export class HeadingBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, HeadingBaseProps>
> {}

export interface HeadingDecoratorProps
  extends Merge<
    agate_Marquee_MarqueeDecoratorProps,
    agate_Skinnable_SkinnableProps
  > {}
export function HeadingDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & HeadingDecoratorProps>;

export interface HeadingProps
  extends Merge<HeadingBaseProps, HeadingDecoratorProps> {
  /**
   * Marquee animation trigger.
   *
   * Allowed values include:
   * *  `'hover'`  - Marquee begins when the pointer enters the component
   * *  `'render'`  - Marquee begins when the component is rendered
   */
  marqueeOn?: "hover" | "render";
}
/**
 * A labeled Heading component, ready to use in Agate applications.
 * 
 * `Heading`  may be used as a header to group related components.
 * 
 * Usage:
 * ```
<Heading
  spacing="medium"
>
  Related Settings
</Heading>
<CheckboxItem>A Setting</CheckboxItem>
<CheckboxItem>A Second Setting</CheckboxItem>
```
 */

export class Heading extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, HeadingProps>
> {}

export default Heading;
