import * as React from 'react';

export type SidebarSubMenuWithAsProp<T> =
  | SidebarSubMenuAsButtonProps<T>
  | SidebarSubMenuAsAnchorProps<T>
  | SidebarSubMenuGenericProps<T>
  | SidebarSubMenuAsComponentProps<T>;

type SidebarSubMenuAsButtonProps<T> =
  React.ButtonHTMLAttributes<HTMLButtonElement> &
    T & {
      /** Renders the submenu trigger as another HTML tag or component.
       * @default 'button'
       */
      as?: 'button';
      /** A callback to be triggered on click. */
      onClick?: React.MouseEventHandler<HTMLButtonElement>;
    };

type SidebarSubMenuAsAnchorProps<T> =
  React.AnchorHTMLAttributes<HTMLAnchorElement> &
    T & {
      /** Renders the submenu trigger as another HTML tag or component. */
      as: 'a';
      /** A callback to be triggered on click. */
      onClick?: React.MouseEventHandler<HTMLAnchorElement>;
    };

type SidebarSubMenuGenericProps<T> = T & {
  /** Renders the submenu trigger as another HTML tag or component. */
  as: keyof Omit<HTMLElementTagNameMap, 'a' | 'button'>;
  /** A callback to be triggered on click. */
  onClick?: React.MouseEventHandler<HTMLElement>;
  [additionalProps: string]: any;
};

type SidebarSubMenuAsComponentProps<T> = T & {
  /** Renders the submenu trigger as another HTML tag or component. */
  as: React.ComponentType<any>;
  /** A callback to be triggered on click. */
  onClick?: React.MouseEventHandler<HTMLElement>;
  [additionalProps: string]: any;
};

export type ExpandCollapseTrigger = 'click' | 'select';

export type SidebarSubMenuNextProps = SidebarSubMenuWithAsProp<{
  /** Applied as data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  /** Sets the items nested under this submenu. */
  children?: React.ReactNode;
  /** Specifies a CSS class name to be appended to the component's root element.
   * @internal
   */
  className?: string;
  /** Indicates whether to display the item as disabled. */
  disabled?: boolean;
  /** Sets a unique key for the submenu. The submenu is marked as selected and expanded when it or one of its nested items matches the `selectedKey` of `<SidebarNext/>`, and the key is passed to `onClick` as the second argument. */
  itemKey?: string;
  /** URL of the page that link goes to. */
  href?: string;
  /** An element to appear as the title of the submenu. */
  title?: React.ComponentType | string;
  /** A callback to be triggered when the sub menu expands. */
  onExpand?: (trigger: ExpandCollapseTrigger) => void;
  /** A callback to be triggered when the sub menu collapses. */
  onCollapse?: (trigger: ExpandCollapseTrigger) => void;
  /** A callback to be triggered when the quick nav opens. */
  onQuickNavOpen?: () => void;
  /** An element to appear at the start of the title. */
  prefix?: React.ReactNode;
  /** An element to appear at the end of the title. */
  suffix?: React.ReactNode;
}>;

declare const SidebarSubMenuNext: React.FC<SidebarSubMenuNextProps>;

export { SidebarSubMenuNext };