/*---------------------------------------------------------------------------------------------
 * 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
 */
import "./ToolGroup.scss";
import classnames from "classnames";
import * as React from "react";
import { Surface } from "@itwin/itwinui-react";
import { ActionItem } from "./ActionItem";
import { GroupItem } from "./GroupItem";
import { CustomItem } from "./CustomItem";
import { OverflowButton } from "./OverflowButton";
import { useOverflow } from "./useOverflow";
import { getChildKey } from "../../layout/tool-settings/Docked";
import { ToolbarContext } from "./Toolbar";
/** @internal */
export function ToolGroup({ children, className, ...props }) {
    const context = React.useContext(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 = 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] = 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: classnames("uifw-toolbar-group-toolGroup_container", `uifw-${orientation}`, `uifw-${panelAlignment}`, className), ref: containerRef },
        React.createElement(Surface, { className: classnames("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, { ref: overflowRef }, overflown.map(([_, child]) => child))))));
}
ToolGroup.ActionItem = ActionItem;
ToolGroup.GroupItem = GroupItem;
ToolGroup.CustomItem = CustomItem;
function getOrientation(expandsTo) {
    switch (expandsTo) {
        case "left":
        case "right":
            return "vertical";
        case "top":
        case "bottom":
            return "horizontal";
    }
}
//# sourceMappingURL=ToolGroup.js.map