"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FloatingMenu = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const react_utils_1 = require("../../../../../../../react-utils/index.js");
const FloatingPopup_1 = require("../FloatingPopup/index.js");
const popupOffset = {
    mainAxis: -9.5,
};
const FloatingMenu = function YfmTableFloatingMenu(props) {
    const { dirtype, canDrag, anchorElement, dropdownItems, switcherMouseProps, onOpenToggle } = props;
    const [isMenuOpened, setMenuOpened] = (0, react_1.useState)(false);
    const [isHovered, setHovered, unsetHovered] = (0, react_utils_1.useBooleanState)(false);
    const showActionView = isMenuOpened || isHovered;
    const isRowType = dirtype === 'row';
    return ((0, jsx_runtime_1.jsx)(FloatingPopup_1.FloatingPopup, { open: true, offset: popupOffset, anchorElement: anchorElement, placement: isRowType ? 'left' : 'top', floatingStyles: {
            lineHeight: 'initial',
        }, style: {
            backgroundColor: 'transparent',
        }, children: (0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { onOpenToggle: (...args) => {
                setMenuOpened(...args);
                onOpenToggle(...args);
            }, renderSwitcher: (switcherProps) => ((0, jsx_runtime_1.jsx)(uikit_1.Flex, { centerContent: true, width: 20, height: 20, style: {
                    borderRadius: 'var(--g-border-radius-xs)',
                    backgroundColor: showActionView
                        ? 'var(--g-color-base-background)'
                        : undefined,
                }, onMouseEnter: setHovered, onMouseLeave: unsetHovered, children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { style: {
                        cursor: canDrag ? 'grab' : undefined,
                        transform: isRowType ? 'rotate(90deg)' : undefined,
                        '--g-button-height': showActionView ? undefined : '5px',
                        '--_--background-color': showActionView
                            ? undefined
                            : 'var(--g-color-base-background)',
                    }, view: isMenuOpened ? 'outlined-action' : 'outlined', pin: showActionView ? 'round-round' : 'circle-circle', size: "xs", qa: isRowType ? 'g-md-yfm-table-row-btn' : 'g-md-yfm-table-column-btn', ...switcherProps, ...switcherMouseProps, children: showActionView ? ((0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: canDrag ? icons_1.GripHorizontal : icons_1.Ellipsis })) : (String.fromCharCode(8194) // en space
                    ) }) })), popupProps: {
                zIndex: 1010,
                placement: isRowType ? 'right-start' : 'bottom-start',
            }, menuProps: { qa: `g-md-yfm-table-${dirtype}-menu` }, items: dropdownItems }) }));
};
exports.FloatingMenu = FloatingMenu;
//# sourceMappingURL=FloatingMenu.js.map
