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

type $RestProps = SvelteHTMLElements["button"];

type $Props = {
  /**
   * Set to `true` to open the menu.
   * @default false
   */
  isOpen?: boolean;

  /**
   * Specify the accessible label for the trigger button.
   * @default "Profile"
   */
  iconDescription?: string;

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

  /**
   * Customize the menu slide transition (for example, `{ duration: 200 }`).
   * By default, the menu does not animate.
   * @default false
   */
  transition?: false | import("svelte/transition").SlideParams;

  /**
   * Set to `true` to prevent the menu from closing when clicking outside
   * @default false
   */
  preventCloseOnClickOutside?: boolean;

  /** Trigger avatar. Falls back to a placeholder. */
  avatar?: (this: void) => void;

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

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

export type ProfileMenuProps = Omit<$RestProps, keyof $Props> & $Props;

export default class ProfileMenu extends SvelteComponentTyped<
  ProfileMenuProps,
  {
    click: WindowEventMap["click"];
    close: CustomEvent<null>;
    open: CustomEvent<null>;
  },
  {
    default: Record<string, never>;
    /** Trigger avatar. Falls back to a placeholder. */
    avatar: Record<string, never>;
  }
> {}