import { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";

type $RestProps = SvelteHTMLElements["li"];

type $Props<Icon = any> = {
  /**
   * Specify the kind of item.
   * @default "default"
   */
  kind?: "default" | "danger";

  /**
   * Set to `true` to disable the item
   * @default false
   */
  disabled?: boolean;

  /**
   * Specify the icon to render.
   * Icon is rendered to the left of the label text.
   * @default undefined
   */
  icon?: Icon;

  /**
   * Specify the label text.
   * Required to nest `MenuItem` children and create a submenu: once set,
   * the default slot holds the nested items instead of the label.
   * Alternatively, use the "labelChildren" slot for custom label content;
   * `labelText` is still used as the accessible name and title in that case.
   * @default undefined
   */
  labelText?: string | undefined;

  /**
   * Obtain a reference to the list item HTML element.
   * @default null
   */
  ref?: null | HTMLLIElement;

  labelChildren?: (this: void) => void;

  children?: (this: void) => void;

  [key: `data-${string}`]: unknown;
};

export type MenuItemProps<Icon = any> = Omit<$RestProps, keyof $Props<Icon>> & $Props<Icon>;

export default class MenuItem<Icon = any> extends SvelteComponentTyped<
  MenuItemProps<Icon>,
  {
    click: CustomEvent<MouseEvent>;
    keydown: WindowEventMap["keydown"];
  },
  {
    default: Record<string, never>;
    labelChildren: Record<string, never>;
  }
> {}