// Type definitions for agate/Panels

import * as React from "react";
import { Arranger as ui_ViewManager_Arranger } from "@enact/ui/ViewManager";
import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
import { MeasurableProps as ui_Measurable_MeasurableProps } from "@enact/ui/Measurable";
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 PanelProps {
  /**
 * By default, the panel will be labeled by its  Header  .
When  `aria-label`  is set, it will be used instead to provide an accessibility label for
the panel.
 */
  "aria-label"?: string;
  /**
 * Sets the strategy used to automatically focus an element within the panel upon render.
 * *  "none" - Automatic focus is disabled
 * *  "last-focused" - The element last focused in the panel with be restored
 * *  "default-element" - The first spottable component within the body will be focused
 * *  Custom Selector - A custom CSS selector may also be provided which will be used to find
the target within the Panel
 */
  autoFocus?: string;
  /**
 * 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:
 * *  `panel`  - The root class name
 * *  `body`  - Applied to the  <section>  element that displays the  `children`  of the  `Panel`
 * *  `header`  - Applied to the header element
 */
  css?: object;
  /**
 * Header for the panel.
 * 
 * This is usually passed by the  Slottable   API by using a
 Header   component as a child of the Panel.
 */
  header?: React.ReactNode;
  /**
 * Hides the body components.
 * 
 * When a Panel is used within  `Panels`  ,
 `BreadcrumbPanels`  , or
 `TabbedPanels`  ,
this property will be set automatically to  `true`  on render and  `false`  after animating
into view.
 */
  hideChildren?: boolean;
}
/**
 * A Panel is the standard view container used inside a  Panels   view
manager instance.  Panels   will typically contain several
instances of these and transition between them.
 */

export class Panel extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, PanelProps>
> {}

export interface PanelsBaseProps {
  /**
 * Set of functions that control how the panels are transitioned into and out of the
viewport.
 */
  arranger?: ui_ViewManager_Arranger;
  /**
   * An object whose keys will used as props for each child
   */
  childProps?: any;
  /**
   * Sets the hint string read when focusing the application close button.
   */
  closeButtonAriaLabel?: string;
  /**
   * A slot to insert additional Panels-level buttons into the global-navigation area.
   */
  controls?: React.ReactNode;
  /**
   * The portion of the screen that this  `Panels`  instance should cover.
   */
  cover?: "full" | "partial";
  /**
   * Duration of the animation (in ms) when transitioning between  `Panel`  components.
   */
  duration?: number;
  /**
 * Unique identifier for the Panels instance.
 * 
 * When defined,  `Panels`  will manage the presentation state of  `Panel`  instances in order
to restore it when returning to the  `Panel` . See
 noSharedState   for more details on shared
state.
 */
  id?: string;
  /**
   * Index of the active panel
   */
  index?: number;
  /**
   * Disables panel transitions.
   */
  noAnimation?: boolean;
  /**
   * Indicates the close button will not be rendered on the top right corner.
   */
  noCloseButton?: boolean;
  /**
 * Prevents maintaining shared state for framework components within this  `Panels`  instance.
 * 
 * When  `false` , each  `Panel`  will track the state of some framework components in order to
restore that state when the Panel is recreated. For example, the scroll position of a
 `agate/Scroller`  within a  `Panel`  will be saved and restored when returning to that
 `Panel` .
 * 
 * This only applied when navigating "back" (to a lower index) to  `Panel` . When navigating
"forwards" (to a higher index), the  `Panel`  and its contained components will use their
default state.
 */
  noSharedState?: boolean;
  /**
   * Called when the app close button is clicked.
   */
  onApplicationClose?: Function;
  /**
   * Called with cancel/back key events.
   */
  onBack?: Function;
  /**
 * Direction of the animation when transitioning between  `Panel`  components.
 * 
 * This is only applied when no arranger has been set. When using  `'horizontal'` , a  `SlideRightArranger`  is used.
When using  `'vertical'` , a  `SlideBottomArranger`  is used.
 * 
 * Valid values are:
 * *  `'horizontal'` , and
 * *  `'vertical'` .
 */
  orientation?: string;
}
/**
 * Basic Panels component without breadcrumbs or default  arranger
 */

export class PanelsBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, PanelsBaseProps>
> {}

export interface BreadcrumbProps {
  /**
   * Index of the associated panel.
   */
  index: number;
  /**
   * Called when the breadcrumb is clicked.
   *
   * The index of the clicked breadcrumb is passed in the event data.
   */
  onSelect?: Function;
}
/**
 * Vertical, transparent bar used to navigate to a prior Panel.
 *
 * `BreadcrumbPanels`   has one breadcrumb.
 */

export class Breadcrumb extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, BreadcrumbProps>
> {}

export interface BreadcrumbPanelsProps {}
/**
 * An instance of Panels in which the Panel uses the entire viewable screen with a single breadcrumb
for the previous panel when viewing any panel beyond the first.
 * 
 * Note  BreadcrumbPanels requires that the  `data-index`  property that all panels variations add to
its children be applied to the root DOM node of each child in order to manage layout correctly.
It is recommended that you spread any extra props on the root node but you may also handle this
property explicitly if necessary.
 */

export class BreadcrumbPanels extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, BreadcrumbPanelsProps>
> {}

export interface TabbedPanelsProps {}
/**
 * Tabbed Panels component.
 * 
 * Usage:
 * ```
<TabbedPanels
  orientation={'vertical'}
  tabs={[
    {title: 'Panel1', icon: 'netbook'},
    {title: 'Panel2', icon: 'aircirculation'}
  ]}
>
  <Panel>Hello Panel 1</Panel>
  <Panel>Hello Panel 2</Panel>
</TabbedPanels>
```
 */

export class TabbedPanels extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, TabbedPanelsProps>
> {}

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

export interface PanelsProps
  extends Merge<PanelsBaseProps, PanelsDecoratorProps> {}
/**
 * An Agate-styled Panels component
 */

export class Panels extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, PanelsProps>
> {}

export default Panels;
