import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ChevronDown, ChevronUp, Copy as CopyIcon, TrashBin } from '@gravity-ui/icons';
import { useActionHandlers } from '@gravity-ui/uikit';
import { block } from "../../../utils/index.js";
import './EditBlock.css';
const b = block('edit-block');
export var EditBlockControls;
(function (EditBlockControls) {
    EditBlockControls["Up"] = "up";
    EditBlockControls["Down"] = "down";
    EditBlockControls["Copy"] = "copy";
    EditBlockControls["Delete"] = "delete";
})(EditBlockControls || (EditBlockControls = {}));
const actionsOrder = [
    EditBlockControls.Up,
    EditBlockControls.Down,
    EditBlockControls.Copy,
    EditBlockControls.Delete,
];
const editBlockControlsIcons = {
    [EditBlockControls.Up]: ChevronUp,
    [EditBlockControls.Down]: ChevronDown,
    [EditBlockControls.Copy]: CopyIcon,
    [EditBlockControls.Delete]: TrashBin,
};
const EditBlock = ({ actions, isActive, onSelect, isHeader, children }) => {
    const ref = React.useRef(null);
    const stopPropagationProps = React.useMemo(() => ({ onClick: (e) => e.stopPropagation() }), []);
    const { onKeyDown } = useActionHandlers(onSelect);
    React.useEffect(() => {
        if (isActive && ref.current) {
            //TODO: add behavior 'smooth' after addiiton of dynamic form layout open/close managing support
            ref.current.scrollIntoView({ block: 'center' });
        }
    }, [isActive]);
    return (_jsxs("div", { className: b({ active: isActive }), onClick: onSelect, onKeyDown: onKeyDown, ref: ref, role: "button", "aria-current": isActive, tabIndex: 0, children: [_jsx("div", { className: b('controls', {
                    active: isActive,
                    isHeader,
                }), children: isActive && (_jsx("div", { className: b('controls-content'), ...stopPropagationProps, children: actionsOrder.map((action) => {
                        const Icon = editBlockControlsIcons[action];
                        return actions[action] ? (_jsx("button", { className: b('control'), onClick: actions[action], children: _jsx(Icon, {}) }, action)) : null;
                    }) })) }), children] }));
};
export default React.memo(EditBlock);
//# sourceMappingURL=EditBlock.js.map
