// Type definitions for agate/TabGroup

import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";
import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
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 TabGroupBaseProps {
  /**
   * The position of the TabGroup related to the tab contents.
   */
  tabPosition: string;
  /**
   * The provided list of tabs.
   */
  tabs: Array<any>;
  /**
   * Nodes to be inserted after the tabs.
   */
  afterTabs?: React.ReactNode;
  /**
   * Nodes to be inserted before the tabs.
   */
  beforeTabs?: React.ReactNode;
  /**
 * 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:
 * *  `tabBar`  - The root class name
 */
  css?: object;
  /**
   * Called when an item is selected.
   *
   * The event payload will be an object with the following members:
   * *  `data`  - The value for the option as received in the  `children`  prop
   * *  `selected`  - Number representing the selected option, 0 indexed
   */
  onSelect?: Function;
  /**
   * Orientation of the tabs.
   * *  Values:  `'horizontal'` ,  `'vertical'`
   */
  orientation?: "horizontal" | "vertical";
  /**
   * Index of the selected tab.
   */
  selectedIndex: number;
}
/**
 * A Tab Group component.
 */

export class TabGroupBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, TabGroupBaseProps>
> {}

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

export interface TabGroupProps
  extends Merge<TabGroupBaseProps, TabGroupDecoratorProps> {}
/**
 * An Tab Group component, ready to use in Agate applications.
 * 
 * Usage:
 * ```
<TabGroup
  tabPosition={'before'}
  tabs={[
    {title: 'Home', icon: 'home'},
    {title: 'Settings', icon: 'setting'},
    {title: 'Theme', icon: 'display'}
  ]}
/>
```
 */

export class TabGroup extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, TabGroupProps>
> {}

export default TabGroup;
