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

export type CarbonTabsContext = {
  tabs: import("svelte/store").Writable<
    ReadonlyArray<{
      id: string;
      label: string;
      disabled: boolean;
      hasSecondaryLabel: boolean;
      index: number;
    }>
  >;
  contentById: import("svelte/store").Readable<
    Record<string, { id: string; index: number }>
  >;
  selectedTab: import("svelte/store").Writable<string | undefined>;
  selectedContent: import("svelte/store").Writable<string | undefined>;
  /** Tracks which icon-only tab's tooltip is open so only one shows at a time.
Scoped per `Tabs` instance. */
  activeTooltip: import("svelte/store").Writable<string | undefined>;
  /** Mirror the `iconOnly` prop into the context so each `Tab` reacts to it. */
  iconOnly: import("svelte/store").Writable<boolean>;
  belowMd: any;
  useAutoWidth: import("svelte/store").Writable<boolean>;
  useFullWidth: import("svelte/store").Writable<boolean>;
  useDismissible: import("svelte/store").Writable<boolean>;
  hasSecondaryLabel: any;
  add: (data: {
    id: string;
    label: string;
    disabled: boolean;
    hasSecondaryLabel: boolean;
  }) => void;
  remove: (id: string) => void;
  addContent: (data: { id: string }) => void;
  removeContent: (id: string) => void;
  update: (id: string) => void;
  dismiss: (id: string) => void;
};

type $RestProps = SvelteHTMLElements["div"];

type $Props = {
  /**
   * Specify the selected tab index.
   * @default 0
   */
  selected?: number;

  /**
   * Specify the type of tabs.
   * @default "default"
   */
  type?: "default" | "container";

  /**
   * Set to `true` for tabs to have an auto-width
   * @default false
   */
  autoWidth?: boolean;

  /**
   * Set to `true` to render a dismiss button for each tab
   * @default false
   */
  dismissible?: boolean;

  /**
   * Set to `true` for tabs to span the full width of the container
   * @default false
   */
  fullWidth?: boolean;

  /**
   * Specify the ARIA label for the chevron icon.
   * @default "Show menu options"
   */
  iconDescription?: string;

  /**
   * Specify the tab trigger href attribute
   * @default "#"
   */
  triggerHref?: string;

  /**
   * Set to `true` to render icon-only tabs.
   * Each `Tab` displays only its `icon`; the `label` is used as the accessible
   * name and the tooltip shown on hover and focus.
   * @default false
   */
  iconOnly?: boolean;

  /**
   * Specify the icon size for icon-only tabs.
   * `"lg"` uses the large scale (48px tabs with a 20px icon);
   * the default scale is 40px tabs with a 16px icon.
   * Only applies when `iconOnly` is `true`.
   * @default "default"
   */
  iconSize?: "default" | "lg";

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

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

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

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

export default class Tabs extends SvelteComponentTyped<
  TabsProps,
  {
    change: CustomEvent<number>;
    click: WindowEventMap["click"];
    dismiss: CustomEvent<{
      id: string;
      label: string;
      disabled: boolean;
      hasSecondaryLabel: boolean;
      index: number;
    }>;
    keypress: WindowEventMap["keypress"];
  },
  { default: Record<string, never>; content: Record<string, never> }
> {}