import { jsx as _jsx } from "react/jsx-runtime";
import { Popup } from '@gravity-ui/uikit';
import { isFunction } from "../../../lodash.js";
import { globalLogger } 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;
    logger;
    actions;
    menuConfig;
    placement;
    view;
    baseProps = { show: false, poppupProps: {} };
    _tooltipRenderItem = null;
    constructor(actions, menuConfig, logger, params) {
        this.logger = logger;
        this.actions = actions;
        this.menuConfig = menuConfig;
        const { flip, placement = 'bottom' } = params;
        this.placement = flip ? placement : [placement];
    }
    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,
            qa: 'g-md-toolbar-selection',
            focus: () => this.view.focus(),
            data: this.getFilteredConfig(),
            editor: this.actions,
            onClick: (id) => {
                globalLogger.action({ mode: 'wysiwyg', source: 'context-menu', action: id });
                this.logger.action({ 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 virtualElem = {
            getBoundingClientRect() {
                // 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 yCenter = Math.max((start.left + end.left) / 2, start.left + 3);
                const top = start.top;
                const left = yCenter - 1;
                const width = 2;
                const height = end.bottom - start.top;
                return {
                    top,
                    left,
                    right: left + width,
                    bottom: top + height,
                    y: top,
                    x: left,
                    height,
                    width,
                };
            },
        };
        return {
            placement: this.placement,
            anchorElement: virtualElem,
        };
    }
}
//# sourceMappingURL=tooltip.js.map
