import { SvelteComponentTyped } from "svelte";

export type MenuButtonProps = {
  /**
   * Required. Specify the trigger button text.
   * Alternatively, use the "labelChildren" slot for custom trigger content;
   * `labelText` is still used as the accessible name in that case.
   * @default undefined
   */
  labelText: string;

  /**
   * Specify the kind of button.
   * @default "primary"
   */
  kind?: "primary" | "tertiary" | "ghost";

  /**
   * Specify the size of the trigger button and the menu's row height.
   * @default "md"
   */
  size?: "xs" | "sm" | "md" | "lg";

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

  /**
   * Set the preferred direction the menu opens toward.
   * The menu flips to the opposite direction if there is not enough space.
   * @default "bottom"
   */
  direction?: "top" | "bottom";

  /**
   * Align the menu to the trigger button.
   * @default "start"
   */
  intrinsicAlign?: "start" | "center" | "end";

  /**
   * Set to `true` to open the menu.
   * @default false
   */
  open?: boolean;

  /**
   * Obtain a reference to the trigger button HTML element.
   * @default null
   */
  ref?: null | HTMLButtonElement | HTMLAnchorElement;

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

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

export default class MenuButton extends SvelteComponentTyped<
  MenuButtonProps,
  {
    blur: CustomEvent<FocusEvent>;
    click: CustomEvent<MouseEvent>;
    close: CustomEvent<{
        trigger: "escape-key" | "outside-click" | "select";
      }>;
    focus: CustomEvent<FocusEvent>;
    mousedown: CustomEvent<MouseEvent>;
    mouseenter: CustomEvent<MouseEvent>;
    mouseleave: CustomEvent<MouseEvent>;
    mouseover: CustomEvent<MouseEvent>;
  },
  {
    default: Record<string, never>;
    labelChildren: Record<string, never>;
  }
> {}