/*---------------------------------------------------------------------------------------------
 * 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 * as React from "react";
import { Icon } from "@itwin/core-react";
import { DropdownMenu, MenuExtraContent, MenuItem } from "@itwin/itwinui-react";
import { isToolbarActionItem, isToolbarCustomItem, isToolbarGroupItem, } from "../../toolbar/ToolbarItem";
import { useConditionalValue } from "../../hooks/useConditionalValue";
import { ExpandIndicator } from "./ExpandIndicator";
import { Item } from "./Item";
import { Badge } from "./Badge";
import { ToolGroupOverflowContext } from "./OverflowButton";
import { ToolbarContext } from "./Toolbar";
/** @internal */
export const GroupItem = React.forwardRef(function GroupItem({ item }, ref) {
    const placement = usePopoverPlacement();
    const context = React.useContext(ToolbarContext);
    const overflowContext = React.useContext(ToolGroupOverflowContext);
    if (overflowContext) {
        return React.createElement(GroupMenuItem, { item: item, onClose: overflowContext.onClose });
    }
    return (React.createElement(DropdownMenu, { menuItems: (close) => {
            return toMenuItems(item, close);
        }, placement: placement, onVisibleChange: (newVisible) => {
            context?.setPopoverOpen(newVisible);
        } },
        React.createElement(Item, { item: item, ref: ref },
            React.createElement(ExpandIndicator, null))));
});
/** @internal */
export function usePopoverPlacement() {
    const context = React.useContext(ToolbarContext);
    if (!context)
        return undefined;
    return `${context.expandsTo}-${context.panelAlignment}`;
}
/** @internal */
export function GroupMenuItem({ item, onClose }) {
    const iconSpec = useConditionalValue(item.icon);
    const label = useConditionalValue(item.label);
    const isDisabled = useConditionalValue(item.isDisabled);
    const isHidden = useConditionalValue(item.isHidden);
    const isActive = useConditionalValue(item.isActive);
    if (isHidden) {
        return null;
    }
    const subMenuItems = isDisabled ? undefined : toMenuItems(item, onClose);
    return (React.createElement(MenuItem, { startIcon: React.createElement(Icon, { iconSpec: iconSpec }), disabled: isDisabled, subMenuItems: subMenuItems, onClick: () => {
            if (isToolbarActionItem(item)) {
                item.execute();
                onClose?.();
            }
        }, isSelected: isActive },
        React.createElement(Badge, { badge: item.badge }),
        label));
}
function toMenuItems(item, onClose) {
    if (isToolbarGroupItem(item)) {
        return item.items.map((groupItem) => {
            return (React.createElement(GroupMenuItem, { key: groupItem.id, item: groupItem, onClose: onClose }));
        });
    }
    if (isToolbarCustomItem(item)) {
        return [
            React.createElement(MenuExtraContent, { key: item.id }, item.panelContent),
        ];
    }
    return [];
}
//# sourceMappingURL=GroupItem.js.map