import { VirtualElement, offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
import { Editor } from '@tiptap/core';
import { PluginKey, EditorState } from '@tiptap/pm/state';
import { EditorView } from '@tiptap/pm/view';
import { Component, VNode } from 'vue';

interface BubbleMenuPluginProps {
    /**
     * The plugin key.
     * @type {PluginKey | string}
     * @default 'bubbleMenu'
     */
    pluginKey: PluginKey | string;
    /**
     * The editor instance.
     */
    editor: Editor;
    /**
     * The DOM element that contains your menu.
     * @type {HTMLElement}
     * @default null
     */
    element: HTMLElement;
    /**
     * The delay in milliseconds before the menu should be updated.
     * This can be useful to prevent performance issues.
     * @type {number}
     * @default 250
     */
    updateDelay?: number;
    /**
     * The delay in milliseconds before the menu position should be updated on window resize.
     * This can be useful to prevent performance issues.
     * @type {number}
     * @default 60
     */
    resizeDelay?: number;
    /**
     * A function that determines whether the menu should be shown or not.
     * If this function returns `false`, the menu will be hidden, otherwise it will be shown.
     */
    shouldShow?: ((props: {
        editor: Editor;
        element: HTMLElement;
        view: EditorView;
        state: EditorState;
        oldState?: EditorState;
        from: number;
        to: number;
    }) => boolean) | null;
    /**
     * The DOM element to append your menu to. Default is the editor's parent element.
     *
     * Sometimes the menu needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues.
     *
     * @type {HTMLElement}
     * @default null
     */
    appendTo?: HTMLElement | (() => HTMLElement);
    /**
     * A function that returns the virtual element for the menu.
     * This is useful when the menu needs to be positioned relative to a specific DOM element.
     * @type {() => VirtualElement | null}
     * @default Position based on the selection.
     */
    getReferencedVirtualElement?: () => VirtualElement | null;
    /**
     * The options for the bubble menu. Those are passed to Floating UI and include options for the placement, offset, flip, shift, arrow, size, autoPlacement,
     * hide, and inline middlewares.
     * @default {}
     * @see https://floating-ui.com/docs/computePosition#options
     */
    options?: {
        strategy?: 'absolute' | 'fixed';
        placement?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
        offset?: Parameters<typeof offset>[0] | boolean;
        flip?: Parameters<typeof flip>[0] | boolean;
        shift?: Parameters<typeof shift>[0] | boolean;
        arrow?: Parameters<typeof arrow>[0] | false;
        size?: Parameters<typeof size>[0] | boolean;
        autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
        hide?: Parameters<typeof hide>[0] | boolean;
        inline?: Parameters<typeof inline>[0] | boolean;
        onShow?: () => void;
        onHide?: () => void;
        onUpdate?: () => void;
        onDestroy?: () => void;
        /**
         * The scrollable element that should be listened to when updating the position of the bubble menu.
         * If not provided, the window will be used.
         * @type {HTMLElement | Window}
         */
        scrollTarget?: HTMLElement | Window;
    };
}

interface BubbleMenuInterface {
    $el: HTMLElement;
    $attrs: Record<string, any>;
    $listeners: Record<string, (...args: any[]) => unknown>;
    $nextTick: (callback: () => void) => void;
    $slots: {
        default?: VNode[];
    };
    $vnode?: VNode;
    pluginKey: BubbleMenuPluginProps['pluginKey'];
    generatedPluginKey?: BubbleMenuPluginProps['pluginKey'];
    editor: BubbleMenuPluginProps['editor'];
    updateDelay: BubbleMenuPluginProps['updateDelay'];
    resizeDelay: BubbleMenuPluginProps['resizeDelay'];
    appendTo: BubbleMenuPluginProps['appendTo'];
    shouldShow: BubbleMenuPluginProps['shouldShow'];
    getReferencedVirtualElement: BubbleMenuPluginProps['getReferencedVirtualElement'];
    options: BubbleMenuPluginProps['options'];
    getPluginKey: () => BubbleMenuPluginProps['pluginKey'];
}
declare const BubbleMenu: Component;

interface FloatingMenuPluginProps {
    /**
     * The plugin key for the floating menu.
     * @default 'floatingMenu'
     */
    pluginKey: PluginKey | string;
    /**
     * The editor instance.
     * @default null
     */
    editor: Editor;
    /**
     * The DOM element that contains your menu.
     * @default null
     */
    element: HTMLElement;
    /**
     * The delay in milliseconds before the menu should be updated.
     * This can be useful to prevent performance issues.
     * @type {number}
     * @default 250
     */
    updateDelay?: number;
    /**
     * The delay in milliseconds before the menu position should be updated on window resize.
     * This can be useful to prevent performance issues.
     * @type {number}
     * @default 60
     */
    resizeDelay?: number;
    /**
     * The DOM element to append your menu to. Default is the editor's parent element.
     *
     * Sometimes the menu needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues.
     *
     * @type {HTMLElement}
     * @default null
     */
    appendTo?: HTMLElement | (() => HTMLElement);
    /**
     * A function that determines whether the menu should be shown or not.
     * If this function returns `false`, the menu will be hidden, otherwise it will be shown.
     */
    shouldShow?: ((props: {
        editor: Editor;
        view: EditorView;
        state: EditorState;
        oldState?: EditorState;
        from: number;
        to: number;
    }) => boolean) | null;
    /**
     * The options for the floating menu. Those are passed to Floating UI and include options for the placement, offset, flip, shift, arrow, size, autoPlacement,
     * hide, and inline middlewares.
     * @default {}
     * @see https://floating-ui.com/docs/computePosition#options
     */
    options?: {
        strategy?: 'absolute' | 'fixed';
        placement?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
        offset?: Parameters<typeof offset>[0] | boolean;
        flip?: Parameters<typeof flip>[0] | boolean;
        shift?: Parameters<typeof shift>[0] | boolean;
        arrow?: Parameters<typeof arrow>[0] | false;
        size?: Parameters<typeof size>[0] | boolean;
        autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
        hide?: Parameters<typeof hide>[0] | boolean;
        inline?: Parameters<typeof inline>[0] | boolean;
        onShow?: () => void;
        onHide?: () => void;
        onUpdate?: () => void;
        onDestroy?: () => void;
        /**
         * The scrollable element that should be listened to when updating the position of the floating menu.
         * If not provided, the window will be used.
         * @type {HTMLElement | Window}
         */
        scrollTarget?: HTMLElement | Window;
    };
}

declare module '@tiptap/core' {
    interface Commands<ReturnType> {
        floatingMenu: {
            /**
             * Update the position of the floating menu.
             * @example editor.commands.updateFloatingMenuPosition()
             */
            updateFloatingMenuPosition: () => ReturnType;
        };
    }
}

interface FloatingMenuInterface extends Vue {
    $attrs: Record<string, any>;
    $listeners: Record<string, (...args: any[]) => unknown>;
    pluginKey: FloatingMenuPluginProps['pluginKey'];
    generatedPluginKey?: FloatingMenuPluginProps['pluginKey'];
    editor: FloatingMenuPluginProps['editor'];
    updateDelay: FloatingMenuPluginProps['updateDelay'];
    resizeDelay: FloatingMenuPluginProps['resizeDelay'];
    options: FloatingMenuPluginProps['options'];
    appendTo: FloatingMenuPluginProps['appendTo'];
    shouldShow: FloatingMenuPluginProps['shouldShow'];
    getPluginKey: () => FloatingMenuPluginProps['pluginKey'];
}
declare const FloatingMenu: Component;

export { BubbleMenu, type BubbleMenuInterface, FloatingMenu, type FloatingMenuInterface };