import * as PopperJS from '@popperjs/core';
import React from 'react';
import { SpotlightInteractivityConfiguration } from './components/tour-kit-spotlight-interactivity';
import { LiveResizeConfiguration } from './utils/live-resize-modifier';
import type { Modifier } from 'react-popper';
export interface Step {
    slug?: string;
    referenceElements?: {
        desktop?: string;
        mobile?: string;
    };
    meta: {
        [key: string]: unknown;
    };
    options?: {
        classNames?: {
            /**
             * `desktop` classes are applied when min-width is larger or equal to 480px.
             */
            desktop?: string | string[];
            /**
             * `mobile` classes are applied when max-width is smaller than 480px.
             */
            mobile?: string | string[];
        };
    };
}
export interface TourStepRendererProps {
    steps: Step[];
    currentStepIndex: number;
    onDismiss: (source: string) => () => void;
    onNextStep: () => void;
    onPreviousStep: () => void;
    onMinimize: () => void;
    setInitialFocusedElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
    onGoToStep: (stepIndex: number) => void;
}
export interface MinimizedTourRendererProps {
    steps: Step[];
    currentStepIndex: number;
    onMaximize: () => void;
    onDismiss: (source: string) => () => void;
}
export type TourStepRenderer = React.FunctionComponent<TourStepRendererProps>;
export type MinimizedTourRenderer = React.FunctionComponent<MinimizedTourRendererProps>;
export type Callback = (currentStepIndex: number) => void;
export type CloseHandler = (steps: Step[], currentStepIndex: number, source: string) => void;
export type PopperModifier = Partial<Modifier<unknown, Record<string, unknown>>>;
export interface Callbacks {
    onMinimize?: Callback;
    onMaximize?: Callback;
    onGoToStep?: Callback;
    onNextStep?: Callback;
    onPreviousStep?: Callback;
    onStepViewOnce?: Callback;
    onStepView?: Callback;
}
export interface Options {
    classNames?: string | string[];
    callbacks?: Callbacks;
    /** An object to enable/disable/combine various tour effects, such as spotlight, overlay, and autoscroll */
    effects?: {
        /**
         * Adds a semi-transparent overlay and highlights the reference element
         * 	when provided with a transparent box over it. The existence of this configuration
         *  key implies enabling the spotlight effect.
         */
        spotlight?: {
            /** An object that configures whether the user is allowed to interact with the referenced element during the tour */
            interactivity?: SpotlightInteractivityConfiguration;
            /** CSS properties that configures the styles applied to the spotlight overlay */
            styles?: React.CSSProperties;
        };
        /** Shows a little triangle that points to the referenced element. Defaults to true */
        arrowIndicator?: boolean;
        /**
         * Includes the semi-transparent overlay for all the steps Also blocks interactions for everything except the tour dialogues,
         *  including the referenced elements. Refer to spotlight interactivity configuration to affect this.
         *
         *  Defaults to false, but if spotlight is enabled it implies this is enabled as well.
         */
        overlay?: boolean;
        /** Configures the autoscroll behaviour. Defaults to False. More information about the configuration at: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView */
        autoScroll?: ScrollIntoViewOptions | boolean;
        /** Configures the behaviour for automatically resizing the tour kit elements (TourKitFrame and Spotlight). Defaults to disabled. */
        liveResize?: LiveResizeConfiguration;
    };
    popperModifiers?: PopperModifier[];
    portalParentElement?: HTMLElement | null;
}
export interface Config {
    steps: Step[];
    renderers: {
        tourStep: TourStepRenderer;
        tourMinimized: MinimizedTourRenderer;
    };
    closeHandler: CloseHandler;
    isMinimized?: boolean;
    options?: Options;
    placement?: PopperJS.Placement;
}
export type Tour = React.FunctionComponent<{
    config: Config;
}>;
/************************
 * WPCOM variant types: *
 ************************/
export type OnTourRateCallback = (currentStepIndex: number, liked: boolean) => void;
export interface WpcomStep extends Step {
    meta: {
        heading: string | null;
        descriptions: {
            desktop: string | React.ReactElement | null;
            mobile: string | React.ReactElement | null;
        };
        imgSrc?: {
            desktop?: {
                src: string;
                type: string;
            };
            mobile?: {
                src: string;
                type: string;
            };
        };
        imgLink?: {
            href: string;
            playable?: boolean;
            onClick?: () => void;
        };
    };
}
export interface WpcomTourStepRendererProps extends TourStepRendererProps {
    steps: WpcomStep[];
}
export interface WpcomOptions extends Options {
    tourRating?: {
        enabled: boolean;
        useTourRating?: () => 'thumbs-up' | 'thumbs-down' | undefined;
        onTourRate?: (rating: 'thumbs-up' | 'thumbs-down') => void;
    };
}
export interface WpcomConfig extends Omit<Config, 'renderers'> {
    steps: WpcomStep[];
    options?: WpcomOptions;
}
export type WpcomTour = React.FunctionComponent<{
    config: WpcomConfig;
}>;
//# sourceMappingURL=types.d.ts.map