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

type $RestProps = SvelteHTMLElements["li"];

type $Props<Icon = any> = {
  /**
   * Specify the item text.
   * Alternatively, use the default slot.
   * @example
   * ```svelte
   * <OverflowMenuItem>
   *   <span>Custom Text</span>
   * </OverflowMenuItem>
   * ```
   * @default "Provide text"
   */
  text?: string;

  /**
   * Specify an icon to render to the left of the item text.
   * Alternatively, use the "icon" slot.
   * @example
   * ```svelte
   * <OverflowMenuItem>
   *   <Icon slot="icon" />
   * </OverflowMenuItem>
   * ```
   * @default undefined
   */
  icon?: Icon;

  /**
   * Specify an icon to render pinned to the right edge of the item.
   * Alternatively, use the "iconRight" slot.
   * @example
   * ```svelte
   * <OverflowMenuItem>
   *   <Icon slot="iconRight" />
   * </OverflowMenuItem>
   * ```
   * @default undefined
   */
  iconRight?: Icon;

  /**
   * Specify the `href` attribute if the item is a link
   * @default ""
   */
  href?: string;

  /**
   * Specify the `target` attribute if the item is a link
   * @default ""
   */
  target?: import("svelte/elements").SvelteHTMLElements["a"]["target"];

  /**
   * Specify the `rel` attribute if the item is a link.
   * By default, `noopener noreferrer` is added if
   * `target="_blank"` unless `rel` is specified.
   * @default undefined
   */
  rel?: import("svelte/elements").SvelteHTMLElements["a"]["rel"];

  /**
   * Set to `true` if the item should be focused when opening the menu
   * @default false
   */
  primaryFocus?: boolean;

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

  /**
   * Set to `true` to include a divider
   * @default false
   */
  hasDivider?: boolean;

  /**
   * Set to `true` to use the danger variant
   * @default false
   */
  danger?: boolean;

  /**
   * Set to `false` to omit the button `title` attribute
   * @default true
   */
  requireTitle?: boolean;

  /**
   * Set an id for the top-level element
   * @default `ccs-${Math.random().toString(36)}`
   */
  id?: string;

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

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

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

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

export default class OverflowMenuItem<Icon = any> extends SvelteComponentTyped<
  OverflowMenuItemProps<Icon>,
  { click: CustomEvent<MouseEvent>; keydown: WindowEventMap["keydown"] },
  {
    default: Record<string, never>;
    icon: Record<string, never>;
    iconRight: Record<string, never>;
  }
> {}