import { jsx as _jsx } from "react/jsx-runtime";
import { offset, shift } from '@floating-ui/react'; // eslint-disable-line import/no-extraneous-dependencies
import { Popup } from '@gravity-ui/uikit';
import { isFunction } from "../../../lodash.js";
import { logger } from "../../../logger.js";
import { ErrorLoggerBoundary } from "../../../react-utils/ErrorBoundary.js";
import { Toolbar } from "../../../toolbar/index.js";
import { getReactRendererFromState } from "../ReactRenderer/index.js";
const SelectionTooltip = ({ show, poppupProps, ...toolbarProps }) => {
    if (!show)
        return null;
    return (_jsx(Popup, { open: true, ...poppupProps, style: { padding: '4px 8px' }, children: _jsx(Toolbar, { ...toolbarProps }) }));
};
export class TooltipView {
    #isTooltipOpen = false;
    actions;
    menuConfig;
    view;
    baseProps = { show: false, poppupProps: {} };
    _tooltipRenderItem = null;
    constructor(actions, menuConfig) {
        this.actions = actions;
        this.menuConfig = menuConfig;
    }
    get isTooltipOpen() {
        return this.#isTooltipOpen;
    }
    show(view, popupProps) {
        this.view = view;
        this.#isTooltipOpen = true;
        this.baseProps = {
            show: true,
            poppupProps: {
                ...popupProps,
                ...this.calcPosition(view),
            },
        };
        this.renderPopup();
    }
    hide(view) {
        this.view = view;
        this.#isTooltipOpen = false;
        this.baseProps = { show: false, poppupProps: {} };
        this.renderPopup();
    }
    destroy() {
        this._tooltipRenderItem?.remove();
        this._tooltipRenderItem = null;
    }
    getSelectionTooltipProps() {
        return {
            ...this.baseProps,
            focus: () => this.view.focus(),
            data: this.getFilteredConfig(),
            editor: this.actions,
            onClick: (id) => logger.action({ mode: 'wysiwyg', source: 'context-menu', action: id }),
        };
    }
    getFilteredConfig() {
        return this.baseProps.show
            ? this.menuConfig
                .map((groupData) => groupData.filter((item) => {
                const { condition } = item;
                if (condition === 'enabled') {
                    return item.isEnable(this.actions);
                }
                if (isFunction(condition)) {
                    return condition(this.view.state);
                }
                return true;
            }))
                .filter((groupData) => Boolean(groupData.length))
            : [];
    }
    renderPopup() {
        this.tooltipRenderItem.rerender();
    }
    get tooltipRenderItem() {
        if (!this._tooltipRenderItem) {
            const reactRenderer = getReactRendererFromState(this.view.state);
            this._tooltipRenderItem = reactRenderer.createItem('selection_context', () => (_jsx(ErrorLoggerBoundary, { children: _jsx(SelectionTooltip, { ...this.getSelectionTooltipProps() }) })));
        }
        return this._tooltipRenderItem;
    }
    calcPosition(view) {
        const viewDom = view.dom;
        // The box in which the tooltip is positioned, to use as base
        const viewBox = viewDom.getBoundingClientRect();
        const viewWidth = viewBox.right - viewBox.left;
        const viewHalfWidth = viewWidth / 2;
        // These are in screen coordinates
        const start = view.coordsAtPos(view.state.selection.from);
        const end = view.coordsAtPos(view.state.selection.to);
        // Find a center-ish x position from the selection endpoints (when
        // crossing lines, end may be more to the left)
        const left = Math.max((start.left + end.left) / 2, start.left + 3);
        const leftOffset = left - (viewBox.left + viewHalfWidth);
        const bottomOffset = -(viewBox.bottom - end.bottom) + this.popupTextOffset;
        return {
            placement: 'bottom',
            anchorElement: viewDom,
            // override floating middlewares
            floatingMiddlewares: [
                offset({
                    mainAxis: bottomOffset,
                    crossAxis: leftOffset,
                }),
                shift({
                    mainAxis: true,
                    crossAxis: false,
                    padding: 4,
                }),
            ],
        };
    }
    get popupTextOffset() {
        return 4; // 4px offset from text selection
    }
}
//# sourceMappingURL=tooltip.js.map
