import * as React from 'react';
import { SidebarBackButton } from '../SidebarBackButton';

export interface SidebarProps {
  /**  Sidebar menu children. */
  children?: React.ReactNode;
  /** Sets class names that replace the default classes of the sidebar root, content and slider elements. */
  classNames?: SidebarClassNames;
  /** The dataHook of the Sidebar. */
  dataHook?: string;
  /**  Sidebar indicator for animating out or in.
   * @default false
   */
  isHidden?: boolean;
  /** Sets the skin of the Sidebar. */
  skin?: SidebarSkin;
  /** Sets the `itemKey` of the selected item. When that item is inside another item's `innerMenu`, the sidebar opens that inner menu. */
  selectedKey?: string;
}

export type SidebarSkin = 'dark' | 'light';
export type SidebarClassNames = {
  sideBar?: string;
  content?: string;
  slider?: string;
  sliderOutToLeft?: string;
  sliderOutToRight?: string;
  sliderInFromLeft?: string;
  sliderInFromRight?: string;
};

export class SidebarItem extends React.PureComponent<SidebarItemProps> {}
interface SidebarItemProps {
  /**  Sidebar menu children. */
  children?: React.ReactNode;
  /** Sets the unique identifier of the item, used to mark it for navigation and selection. */
  itemKey?: string;
  /** Accepts an array of nodes to display as a nested menu level when the item is clicked. A nested item without an `itemKey` gets the parent's `itemKey` followed by its index. */
  innerMenu?: React.ReactNode[];
  /** Specifies whether the item ignores clicks. A disabled item neither calls `onClick` nor navigates. */
  disable?: boolean;
  /** Defines a callback function which is called when the item is clicked, with its `itemKey` and the click event. Calling `preventDefault()` on the event stops the sidebar from navigating. */
  onClick?: (itemKey: string, e: React.MouseEvent<HTMLElement>) => void;
}

export class SidebarPersistentHeader extends React.Component<SidebarPersistentHeaderProps> {}
interface SidebarPersistentHeaderProps {
  /** Accepts any content to render at the top of the sidebar, outside the sliding menu area. */
  children: React.ReactNode;
}

export class SidebarPersistentFooter extends React.Component<SidebarPersistentFooterProps> {}
interface SidebarPersistentFooterProps {
  /** Accepts any content to render at the bottom of the sidebar, outside the sliding menu area. */
  children: React.ReactNode;
}

export class SidebarContextConsumer extends React.Component<SidebarContextConsumerProps> {}
interface SidebarContextConsumerProps {
  /**  Sidebar menu children. */
  children(renderProps: {
    itemClicked: (itemKey: string) => void;
    backClicked: () => void;
    getSelectedKey: () => string;
    getSkin: () => SidebarSkin;
    getIsMenuExpanded: () => boolean;
  }): React.ReactNode;
}

export class SidebarItemContextConsumer extends React.Component<SidebarItemContextConsumerProps> {}
interface SidebarItemContextConsumerProps {
  /**  Sidebar menu children. */
  children(renderProps: {
    selected: () => boolean;
    getIsMenuExpanded: () => boolean;
  }): React.ReactNode;
}

export class Sidebar extends React.Component<SidebarProps> {
  static Item: typeof SidebarItem;
  static PersistentHeader: typeof SidebarPersistentHeader;
  static PersistentFooter: typeof SidebarPersistentFooter;
  static BackButton: typeof SidebarBackButton;

  setSelectedKey: (setSelectedKey: string) => void;
}

export {};