import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from 'react';
import { Ellipsis as DotsColumn, GripHorizontal as GripColumn } from '@gravity-ui/icons';
import { Button, DropdownMenu, Flex, Icon, } from '@gravity-ui/uikit';
import { useBooleanState } from "../../../../../../../react-utils/index.js";
import { FloatingPopup } from "../FloatingPopup/index.js";
const popupOffset = {
    mainAxis: -9.5,
};
export const FloatingMenu = function YfmTableFloatingMenu(props) {
    const { dirtype, canDrag, anchorElement, dropdownItems, switcherMouseProps, onOpenToggle } = props;
    const [isMenuOpened, setMenuOpened] = useState(false);
    const [isHovered, setHovered, unsetHovered] = useBooleanState(false);
    const showActionView = isMenuOpened || isHovered;
    const isRowType = dirtype === 'row';
    return (_jsx(FloatingPopup, { open: true, offset: popupOffset, anchorElement: anchorElement, placement: isRowType ? 'left' : 'top', floatingStyles: {
            lineHeight: 'initial',
        }, style: {
            backgroundColor: 'transparent',
        }, children: _jsx(DropdownMenu, { onOpenToggle: (...args) => {
                setMenuOpened(...args);
                onOpenToggle(...args);
            }, renderSwitcher: (switcherProps) => (_jsx(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: _jsx(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 ? (_jsx(Icon, { data: canDrag ? GripColumn : DotsColumn })) : (String.fromCharCode(8194) // en space
                    ) }) })), popupProps: {
                zIndex: 1010,
                placement: isRowType ? 'right-start' : 'bottom-start',
            }, menuProps: { qa: `g-md-yfm-table-${dirtype}-menu` }, items: dropdownItems }) }));
};
//# sourceMappingURL=FloatingMenu.js.map
