import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { ArrowShapeRightFromLine as AddColumnAfterIcon, ArrowShapeLeftFromLine as AddColumnBeforeIcon, ArrowShapeDownFromLine as AddRowAfterIcon, ArrowShapeUpFromLine as AddRowBeforeIcon, BroomMotion as ClearCellsIcon, LayoutHeader as HeaderRowIcon, Xmark as RemoveRowOrColumnIcon, TrashBin as RemoveTableIcon, } from '@gravity-ui/icons';
import { DropdownMenu, Flex, Icon, Menu, Switch } from '@gravity-ui/uikit';
import { i18n } from "../../../../../../../i18n/yfm-table/index.js";
import { CellBgMenuItem } from "../CellBgMenuItem/index.js";
import { FloatingMenu } from "../FloatingMenu/FloatingMenu.js";
export const FloatingMenuControl = function YfmTableFloatingMenuControl({ type, multiple, dndHandler, cellElement, tableElement, onMenuOpenToggle, onClearCellsClick, onInsertBeforeClick, onInsertAfterClick, onRemoveRangeClick, onRemoveTableClick, isRowHeader = false, onRowHeaderChange, currentCellBg, onCellBgChange, }) {
    const dropdownContent = (_jsxs(Menu, { qa: `g-md-yfm-table-${type}-menu`, children: [(onRowHeaderChange || onCellBgChange) && (_jsxs(Menu.Group, { children: [onRowHeaderChange && (_jsx(DropdownMenu.Item, { qa: "g-md-yfm-table-row-header-toggle", iconStart: _jsx(Icon, { data: HeaderRowIcon }), text: _jsxs(Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [i18n(`row.header${multiple ? '.multiple' : ''}`), _jsx(Switch, { size: "m", checked: isRowHeader, 
                                    // pointerEvents:none prevents the Switch's label from generating
                                    // a synthetic click on its <input>, which would trigger action twice
                                    style: { pointerEvents: 'none' } })] }), action: () => onRowHeaderChange(!isRowHeader) })), onCellBgChange && (_jsx(CellBgMenuItem, { qa: `g-md-yfm-table-${type}-cell-bg`, currentCellBg: currentCellBg, onCellBgChange: onCellBgChange }))] })), _jsxs(Menu.Group, { children: [_jsx(DropdownMenu.Item, { qa: `g-md-yfm-table-action-add-${type}-before`, iconStart: _jsx(Icon, { data: type === 'row' ? AddRowBeforeIcon : AddColumnBeforeIcon }), text: i18n(`${type}.add.before`), action: onInsertBeforeClick }), _jsx(DropdownMenu.Item, { qa: `g-md-yfm-table-action-add-${type}-after`, iconStart: _jsx(Icon, { data: type === 'row' ? AddRowAfterIcon : AddColumnAfterIcon }), text: i18n(`${type}.add.after`), action: onInsertAfterClick }), _jsx(DropdownMenu.Item, { qa: `g-md-yfm-table-${type}-clear-cells`, iconStart: _jsx(Icon, { data: ClearCellsIcon }), text: i18n('cells.clear'), action: onClearCellsClick })] }), _jsxs(Menu.Group, { children: [_jsx(DropdownMenu.Item, { qa: `g-md-yfm-table-action-remove-${type}`, iconStart: _jsx(Icon, { data: RemoveRowOrColumnIcon }), text: i18n(`${type}.remove${multiple ? '.multiple' : ''}`), action: onRemoveRangeClick }), _jsx(DropdownMenu.Item, { qa: "g-md-yfm-table-action-remove-table", theme: "danger", iconStart: _jsx(Icon, { data: RemoveTableIcon }), text: i18n('table.remove'), action: onRemoveTableClick })] })] }));
    const anchor = useMemo(() => getVirtualAnchor(type, tableElement, cellElement), [type, tableElement, cellElement]);
    return (_jsx(FloatingMenu, { dirtype: type, canDrag: dndHandler ? dndHandler.canDrag() : false, onOpenToggle: onMenuOpenToggle, anchorElement: anchor, switcherMouseProps: dndHandler
            ? {
                onMouseLeave: dndHandler.control_handleMouseLeave,
                onMouseDown: dndHandler.control_handleMouseDown,
                onMouseMove: dndHandler.control_handleMouseMove,
                onMouseUp: dndHandler.control_handleMouseUp,
            }
            : undefined, children: dropdownContent }));
};
function getVirtualAnchor(type, tableElem, cellElem) {
    if (type === 'row') {
        return {
            contextElement: cellElem,
            getBoundingClientRect() {
                const cellRect = cellElem.getBoundingClientRect();
                const tableRect = tableElem.getBoundingClientRect().toJSON();
                {
                    // fix table rect
                    tableRect.x += 1;
                    tableRect.width -= 2;
                    tableRect.left += 1;
                    tableRect.right -= 1;
                }
                return {
                    // from table
                    x: tableRect.x,
                    width: tableRect.width,
                    left: tableRect.left,
                    right: tableRect.right,
                    // from cell
                    y: cellRect.y,
                    height: cellRect.height,
                    top: cellRect.top,
                    bottom: cellRect.top,
                };
            },
        };
    }
    if (type === 'column') {
        return {
            contextElement: cellElem,
            getBoundingClientRect() {
                const cellRect = cellElem.getBoundingClientRect().toJSON();
                const tableRect = tableElem.getBoundingClientRect();
                const EDGE_OFFSET = 16;
                const cellMiddle = cellRect.x + cellRect.width / 2;
                // left border of table
                if (cellMiddle - EDGE_OFFSET <= tableRect.left) {
                    const visible = cellRect.right - tableRect.left;
                    cellRect.width = (visible - EDGE_OFFSET) * 2;
                    cellRect.left = cellRect.right - cellRect.width;
                    cellRect.x = cellRect.left;
                }
                // right border of table
                if (cellMiddle + EDGE_OFFSET >= tableRect.right) {
                    const visible = tableRect.right - cellRect.left;
                    cellRect.width = (visible - EDGE_OFFSET) * 2;
                    cellRect.right = cellRect.left + cellRect.width;
                }
                return cellRect;
            },
        };
    }
    throw new Error(`Unknown control type: ${type}`);
}
//# sourceMappingURL=FloatingMenuControl.js.map
