// Type definitions for agate/Drawer

import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";
import { TransitionProps as ui_Transition_TransitionProps } from "@enact/ui/Transition";
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 DrawerBaseProps extends ui_Transition_TransitionProps {
  /**
 * Customizes the component by mapping the supplied collection of CSS class names to the
corresponding internal elements and states of this component.
 */
  css?: object;
  /**
   * Components to be included under the primary content.
   */
  footer?: React.ReactNode;
  /**
   * Header for the drawer.
   */
  header?: React.ReactNode;
  /**
   * Disables drawer transition animation.
   */
  noAnimation?: boolean;
  /**
   * Called after the transition to hide the drawer has finished.
   */
  onHide?: Function;
  /**
   * Called after the drawer's "show" transition finishes.
   */
  onShow?: Function;
  /**
   * Displays the drawer.
   */
  open?: boolean;
  /**
   * The container id for   .
   */
  spotlightId?: string;
  /**
 * Restricts or prioritizes spotlight navigation.
 * 
 * Allowed values are:
 * *  `'none'`  - Spotlight can move freely within and beyond the drawer
 * *  `'self-first'`  - Spotlight should prefer components within the drawer over
components beyond the drawer, or
 * *  `'self-only'`  - Spotlight can only be set within the drawer
 */
  spotlightRestrict?: "none" | "self-first" | "self-only";
}
/**
 * A drawer component, without behaviors.
 */

export class DrawerBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, DrawerBaseProps>
> {}

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

export interface DrawerProps
  extends Merge<DrawerBaseProps, DrawerDecoratorProps> {}
/**
 * A ready-to-use drawer component.
 * 
 * Usage:
 * ```
<Drawer open>
  Hello Enact!
</Drawer>
```
 */

export class Drawer extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, DrawerProps>
> {}

export default Drawer;
