"use strict";
/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module Toolbar
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolGroup = void 0;
require("./ToolGroup.scss");
const classnames_1 = require("classnames");
const React = require("react");
const itwinui_react_1 = require("@itwin/itwinui-react");
const ActionItem_1 = require("./ActionItem");
const GroupItem_1 = require("./GroupItem");
const CustomItem_1 = require("./CustomItem");
const OverflowButton_1 = require("./OverflowButton");
const useOverflow_1 = require("./useOverflow");
const Docked_1 = require("../../layout/tool-settings/Docked");
const Toolbar_1 = require("./Toolbar");
/** @internal */
function ToolGroup({ children, className, ...props }) {
    const context = React.useContext(Toolbar_1.ToolbarContext);
    const expandsTo = context?.expandsTo ?? "bottom";
    const panelAlignment = context?.panelAlignment ?? "start";
    const orientation = getOrientation(expandsTo);
    const childrenArray = React.Children.toArray(children);
    const keyToChildMap = childrenArray.reduce((acc, child, index) => {
        const childKey = (0, Docked_1.getChildKey)(child, index);
        acc.set(childKey, child);
        return acc;
    }, new Map());
    const childrenKeys = Array.from(keyToChildMap.keys());
    const itemRefs = React.useRef(new Map());
    const overflowRef = React.useRef(null);
    const getItemSize = React.useCallback((item) => {
        const element = itemRefs.current.get(item);
        if (!element)
            return { width: 0, height: 0 };
        return element.getBoundingClientRect();
    }, []);
    const getOverflowSize = React.useCallback(() => {
        const element = overflowRef.current;
        if (!element)
            return { width: 0, height: 0 };
        return element.getBoundingClientRect();
    }, []);
    const [containerRef, componentRef, visibleCount, renderOverflow] = (0, useOverflow_1.useOverflow)(childrenKeys, orientation, getItemSize, getOverflowSize);
    const keyToChildEntries = Array.from(keyToChildMap.entries());
    const visibleChildren = keyToChildEntries.slice(0, visibleCount);
    const overflown = keyToChildEntries.slice(visibleCount);
    return (React.createElement("div", { className: (0, classnames_1.default)("uifw-toolbar-group-toolGroup_container", `uifw-${orientation}`, `uifw-${panelAlignment}`, className), ref: containerRef },
        React.createElement(itwinui_react_1.Surface, { className: (0, classnames_1.default)("uifw-toolbar-group-toolGroup", `uifw-${orientation}`), ref: componentRef, ...props },
            visibleChildren.map(([item, child]) => {
                if (!React.isValidElement(child))
                    return child;
                return React.cloneElement(child, {
                    ref: (el) => {
                        if (!el) {
                            itemRefs.current.delete(item);
                            return;
                        }
                        itemRefs.current.set(item, el);
                    },
                });
            }),
            renderOverflow && (React.createElement(OverflowButton_1.OverflowButton, { ref: overflowRef }, overflown.map(([_, child]) => child))))));
}
exports.ToolGroup = ToolGroup;
ToolGroup.ActionItem = ActionItem_1.ActionItem;
ToolGroup.GroupItem = GroupItem_1.GroupItem;
ToolGroup.CustomItem = CustomItem_1.CustomItem;
function getOrientation(expandsTo) {
    switch (expandsTo) {
        case "left":
        case "right":
            return "vertical";
        case "top":
        case "bottom":
            return "horizontal";
    }
}
//# sourceMappingURL=ToolGroup.js.map