import { StoryId } from 'storybook/internal/types';

declare const HIGHLIGHT = "storybook/highlight/add";
declare const REMOVE_HIGHLIGHT = "storybook/highlight/remove";
declare const RESET_HIGHLIGHT = "storybook/highlight/reset";
declare const SCROLL_INTO_VIEW = "storybook/highlight/scroll-into-view";

interface Call {
    id: string;
    cursor: number;
    storyId: StoryId;
    ancestors: Call['id'][];
    path: Array<string | CallRef>;
    method: string;
    args: unknown[];
    actualArgs?: unknown[];
    interceptable: boolean;
    retain: boolean;
    status?: CallStates.DONE | CallStates.ERROR | CallStates.ACTIVE | CallStates.WAITING;
    exception?: {
        name: Error['name'];
        message: Error['message'];
        stack: Error['stack'];
        callId: Call['id'];
        showDiff?: boolean;
        diff?: string;
        actual?: unknown;
        expected?: unknown;
    };
}
declare enum CallStates {
    DONE = "done",
    ERROR = "error",
    ACTIVE = "active",
    WAITING = "waiting"
}
interface CallRef {
    __callId__: Call['id'];
}

declare const iconPaths: {
    chevronLeft: string[];
    chevronRight: string[];
    info: string[];
    shareAlt: string[];
};
type IconName = keyof typeof iconPaths;

interface HighlightMenuItem {
    /** Unique identifier for the menu item */
    id: string;
    /** Title of the menu item */
    title: string;
    /** Description of the menu item */
    description?: string;
    /** Icon for the menu item, left side */
    iconLeft?: IconName;
    /** Icon for the menu item, right side */
    iconRight?: IconName;
    /** Name for a channel event to trigger when the menu item is clicked */
    clickEvent?: string;
    /** HTML selectors for which this menu item should show (subset of `selectors`) */
    selectors?: HighlightOptions['selectors'];
}
interface HighlightOptions {
    /** Unique identifier for the highlight, required if you want to remove the highlight later */
    id?: string;
    /** CSS selectors or instrumenter call refs */
    selectors: (string | CallRef)[];
    /** Priority of the highlight, higher takes precedence, defaults to 0 */
    priority?: number;
    /** CSS styles to apply to the highlight */
    styles?: Record<string, string>;
    /** CSS styles to apply to the highlight when it is hovered */
    hoverStyles?: Record<string, string>;
    /** CSS styles to apply to the highlight when it is focused or selected */
    focusStyles?: Record<string, string>;
    /** Keyframes required for animations */
    keyframes?: string;
    /** Groups of menu items to show when the highlight is selected */
    menu?: HighlightMenuItem[][];
}
interface ClickEventDetails {
    top: number;
    left: number;
    width: number;
    height: number;
    selectors: (string | CallRef)[];
    element: {
        attributes: Record<string, string>;
        localName: string;
        tagName: string;
        outerHTML: string;
    };
}

export { type ClickEventDetails, HIGHLIGHT, type HighlightMenuItem, type HighlightOptions, REMOVE_HIGHLIGHT, RESET_HIGHLIGHT, SCROLL_INTO_VIEW };
