import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { Ellipsis } from '@gravity-ui/icons';
import { useMeasure } from 'react-use';
import { cn } from "../classname.js";
import { logger } from "../logger.js";
import { useRenderTime } from "../react-utils/hooks.js";
import { Toolbar } from "./Toolbar.js";
import { ToolbarListButton } from "./ToolbarListButton.js";
import { shrinkToolbarData } from "./flexible.js";
import { ToolbarDataType } from "./types.js";
import "./FlexToolbar.css";
const b = cn('flex-toolbar');
export function FlexToolbar(props) {
    useRenderTime((time) => {
        logger.metrics({
            component: 'toolbar',
            event: 'render',
            duration: time,
        });
    });
    const { data, className, hiddenActions, disableTooltip, disablePreview, disableHotkey, display = 'shrink', } = props;
    const [ref, { width }] = useMeasure();
    const { data: items, dots } = useMemo(() => {
        const toolbarButtonIds = data.reduce((a, toolbarGroup) => {
            return [
                ...a,
                ...toolbarGroup
                    .map((toolbarButton) => {
                    if (toolbarButton.type === 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));
        if (display === 'scroll') {
            return {
                data,
                dots: filteredHiddenAction?.length ? filteredHiddenAction : undefined,
            };
        }
        return shrinkToolbarData({
            data,
            availableWidth: width,
            hiddenActions: filteredHiddenAction,
        });
    }, [data, display, hiddenActions, width]);
    return (_jsx("div", { ref: ref, className: b(null, [className]), children: _jsxs("div", { className: b('container'), children: [_jsx(Toolbar, { ...props, data: items, className: b('bar') }), dots?.length && (_jsx(ToolbarListButton, { qa: "g-md-toolbar-more-action", qaMenu: "g-md-toolbar-additional", data: dots, icon: { data: Ellipsis }, title: props.dotsTitle, editor: props.editor, focus: props.focus, onClick: props.onClick, className: b('dots'), alwaysActive: true, disableTooltip: disableTooltip, disableHotkey: disablePreview, disablePreview: disableHotkey }))] }) }));
}
//# sourceMappingURL=FlexToolbar.js.map
