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

type $RestProps = HTMLAttributes<HTMLElement>;

type $Props = {
  /**
   * Specify the result label. The portion matching the search value is highlighted.
   * Omit `text` and use the default slot to render custom content.
   * @default undefined
   */
  text?: string | undefined;

  /**
   * Specify the value emitted on selection. Defaults to `text`.
   * @default undefined
   */
  value?: string | undefined;

  /**
   * Render the item as a link with this `href`.
   * @default undefined
   */
  href?: string | undefined;

  /**
   * Specify the icon rendered before the label.
   * @default undefined
   */
  icon?: any;

  /**
   * Specify the icon rendered after the label, for example an external-link affordance.
   * @default undefined
   */
  iconRight?: any;

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

  /**
   * Set to `true` to always render the item, bypassing fuzzy filtering.
   * Use for persistent rows like footer "Search X in Y" actions.
   * @default false
   */
  persistent?: boolean;

  /**
   * Override whether this item is filtered by the search value.
   * Defaults to the group's `filter`, then the menu's `shouldFilter`.
   * @default undefined
   */
  filter?: boolean | undefined;

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

  children?: (this: void, ...args: [{
        query: string;
        matched: boolean;
        indices: number[];
        segments: Array<{
            text: string;
            match: boolean
          }>
      }]) => void;

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

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

export default class SearchMenuItem extends SvelteComponentTyped<
  SearchMenuItemProps,
  {
    click: WindowEventMap["click"];
    mousedown: WindowEventMap["mousedown"];
    select: CustomEvent<{
        value: string;
        item: {
          text?: string;
          value?: string;
          href?: string
        };
        event: Event
      }>;
  },
  {
    default: {
      query: string;
      matched: boolean;
      indices: number[];
      segments: Array<{
          text: string;
          match: boolean
        }>
    };
  }
> {}