"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FlexToolbar = FlexToolbar;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const icons_1 = require("@gravity-ui/icons");
const react_use_1 = require("react-use");
const classname_1 = require("../classname.js");
const logger_1 = require("../logger.js");
const hooks_1 = require("../react-utils/hooks.js");
const Toolbar_1 = require("./Toolbar.js");
const ToolbarListButton_1 = require("./ToolbarListButton.js");
const flexible_1 = require("./flexible.js");
const types_1 = require("./types.js");
require("./FlexToolbar.css");
const b = (0, classname_1.cn)('flex-toolbar');
function FlexToolbar(props) {
    (0, hooks_1.useRenderTime)((time) => {
        logger_1.logger.metrics({
            component: 'toolbar',
            event: 'render',
            duration: time,
        });
    });
    const { data, className, hiddenActions } = props;
    const [ref, { width }] = (0, react_use_1.useMeasure)();
    const { data: items, dots } = (0, react_1.useMemo)(() => {
        const toolbarButtonIds = data.reduce((a, toolbarGroup) => {
            return [
                ...a,
                ...toolbarGroup
                    .map((toolbarButton) => {
                    if (toolbarButton.type === types_1.ToolbarDataType.ListButton) {
                        return toolbarButton.data.map((v) => v.id);
                    }
                    return toolbarButton.id;
                })
                    .flat(),
            ];
        }, []);
        // Finding only actions tha are not present in the main toolbar config
        const filteredHiddenAction = hiddenActions?.filter((a) => !toolbarButtonIds.includes(a.id));
        return (0, flexible_1.shrinkToolbarData)({
            data,
            availableWidth: width,
            hiddenActions: filteredHiddenAction,
        });
    }, [data, width, hiddenActions]);
    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: b(null, [className]), children: (0, jsx_runtime_1.jsxs)("div", { className: b('container'), children: [(0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { ...props, data: items, className: b('bar') }), dots?.length && ((0, jsx_runtime_1.jsx)(ToolbarListButton_1.ToolbarListButton, { data: dots, icon: { data: icons_1.Ellipsis }, title: props.dotsTitle, editor: props.editor, focus: props.focus, onClick: props.onClick, className: b('dots'), alwaysActive: true }))] }) }));
}
//# sourceMappingURL=FlexToolbar.js.map
