"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const cn_1 = require("../../../../utils/cn.js");
const b = (0, cn_1.formGeneratorCn)('array-item-button');
const ItemButton = ({ className, onRemove, onReorderUp, onReorderDown, disableReorderUp = false, disableReorderDown = false, }) => {
    const buttonRef = React.useRef(null);
    const [isOpen, setIsOpen] = React.useState(false);
    const onMenuItemClickWrapper = React.useCallback((callback) => {
        return () => {
            setIsOpen(false);
            callback();
        };
    }, []);
    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b(null, className), ref: buttonRef, onClick: () => setIsOpen(true), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.EllipsisVertical }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { placement: 'bottom-end', anchorRef: buttonRef, open: isOpen, onOutsideClick: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)(uikit_1.Menu, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { theme: 'danger', onClick: onMenuItemClickWrapper(onRemove), iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin }), children: "Remove" }), (0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { disabled: disableReorderUp, onClick: onMenuItemClickWrapper(onReorderUp), iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowUp }), children: "Reorder Up" }), (0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { disabled: disableReorderDown, onClick: onMenuItemClickWrapper(onReorderDown), iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowDown }), children: "Reorder Down" })] }) })] }));
};
exports.default = ItemButton;
//# sourceMappingURL=ItemButton.js.map
