// Type definitions for agate/Popup

import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";
import * as React from "react";

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 PopupStateProps {
  /**
   * Hint string read when focusing the popup close button.
   */
  closeButtonAriaLabel?: string;
  /**
   * Disables transition animation.
   */
  noAnimation?: boolean;
  /**
   * Indicates that the popup will not trigger  `onClose`  on the  _ESC_  key press.
   */
  noAutoDismiss?: boolean;
  /**
 * Called on:
 * *  pressing  `ESC`  key,
 * *  clicking on the close button, or
 * *  moving spotlight focus outside the boundary of the popup when  `spotlightRestrict`  is
 `'self-first'` .
 * 
 * It is the responsibility of the callback to set the  `open`  property to  `false` .
 */
  onClose?: Function;
  /**
   * Called after hide transition has completed, and immediately with no transition.
   */
  onHide?: Function;
  /**
   * Called when a key is pressed.
   */
  onKeyDown?: Function;
  /**
 * Called after show transition has completed, and immediately with no transition.
 * 
 * Note: The function does not run if Popup is initially opened and
   is  `true` .
 */
  onShow?: Function;
  /**
   * Controls the visibility of the Popup.
   *
   * By default, the Popup and its contents are not rendered until  `open` .
   */
  open?: boolean;
  /**
   * Position of the Popup on the screen.
   */
  position?: "bottom" | "center" | "fullscreen" | "left" | "right" | "top";
  /**
 * Scrim type.
 * *  Values:  `'transparent'` ,  `'translucent'` , or  `'none'` .
 * 
 * `'none'`  is not compatible with  `spotlightRestrict`  of  `'self-only'` , use a transparent scrim
to prevent mouse focus when using popup.
 */
  scrimType?: "transparent" | "translucent" | "none";
  /**
 * Restricts or prioritizes navigation when focus attempts to leave the popup.
 * *  Values:  `'self-first'` , or  `'self-only'` .
 * 
 * When using  `self-first` , attempts to leave the popup via 5-way will fire  `onClose`  based
on the following values of  `position` :
 * *  `'bottom'`  - When leaving via 5-way up
 * *  `'top'`  - When leaving via 5-way down
 * *  `'left'`  - When leaving via 5-way right
 * *  `'right'`  - When leaving via 5-way left
 * *  `'center'`  - When leaving via any 5-way direction
 * 
 * Note: If  `onClose`  is not set, then this has no effect on 5-way navigation. If the popup
has no spottable children, 5-way navigation will cause the Popup to fire  `onClose` .
 */
  spotlightRestrict?: "self-first" | "self-only";
}
export function PopupState<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & PopupStateProps>;

export interface PopupBaseProps {
  /**
   * Set the priority with which screen reader should treat updates to live regions for the Popup.
   */
  "aria-live"?: string | object;
  /**
   * Buttons to be included within the Popup component.
   *
   * Typically, these buttons would be used to close or take action on the dialog.
   */
  buttons?: JSX.Element | JSX.Element[];
  /**
   * Centers the contents.
   */
  centered?: boolean;
  /**
   * When true, popup displays a close button.
   */
  closeButton?: boolean;
  /**
 * Customizes the component by mapping the supplied collection of CSS class names to the
corresponding internal elements and states of this component.
 * 
 * The following classes are supported:
 * *  `popup`  - The root class name
 * *  `body`  - Applied to the body content container
 * *  `popupTransitionContainer`  - Applied to the Popup's outermost container. Sizing can be
applied here for percentage-of-screen values.
 * *  `top`  - Applied when the  `position`  is 'top'
 * *  `right`  - Applied when the  `position`  is 'right'
 * *  `bottom`  - Applied when the  `position`  is 'bottom'
 * *  `left`  - Applied when the  `position`  is 'left'
 */
  css?: object;
  /**
 * Controls how long the transition should take.
Supported preset durations are:  `'short'`  (250ms),  `'medium'`  (500ms), and  `'long'`  (1s).
 `'short'`  (250ms) is default when no others are specified.
 */
  duration?: string;
  /**
   * Disables transition animation.
   */
  noAnimation?: boolean;
  /**
   * Called when the popup is closed.
   */
  onClose?: Function;
  /**
   * Called after the popup's "hide" transition finishes.
   */
  onHide?: Function;
  /**
   * Called after the popup's "show" transition finishes.
   */
  onShow?: Function;
  /**
   * Controls the visibility of the Popup.
   *
   * By default, the Popup and its contents are not rendered until  `open` .
   */
  open?: boolean;
  /**
   * Sets the position of the popup on the screen.
   */
  position?: "bottom" | "center" | "fullscreen" | "left" | "right" | "top";
  /**
   * The ARIA role for the Popup.
   */
  role?: string | object;
  /**
   * The container id for   .
   */
  spotlightId?: string;
  /**
 * Restricts or prioritizes navigation when focus attempts to leave the popup.
 * 
 * It can be either  `'none'` ,  `'self-first'` , or  `'self-only'` .
 * 
 * Note: The ready-to-use    component only supports
 `'self-first'`  and  `'self-only'` .
 */
  spotlightRestrict?: "none" | "self-first" | "self-only";
  /**
   * The primary text of the popup.
   */
  title?: string;
  /**
   * The type of transition to affect the content.
   *
   * Supported types are:  `'slide'`  and  `'fade'` .
   */
  type?: string;
}
/**
 * The base popup component.
 */

export class PopupBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, PopupBaseProps>
> {}

export interface PopupDecoratorProps
  extends Merge<ui_Slottable_SlottableProps, agate_Skinnable_SkinnableProps> {}
export function PopupDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & PopupDecoratorProps>;

export interface PopupProps
  extends Merge<PopupBaseProps, PopupDecoratorProps> {}
/**
 * A stateful component that renders a popup in a
  .
 */

export class Popup extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, PopupProps>
> {}

export default Popup;
