/*---------------------------------------------------------------------------------------------
 * 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.js";
import { useConditionalProp } from "../../hooks/useConditionalProp.js";
import { ExpandIndicator } from "./ExpandIndicator.js";
import { Item } from "./Item.js";
import { Badge } from "./Badge.js";
import { ToolGroupOverflowContext } from "./OverflowButton.js";
import { ToolbarContext } from "./Toolbar.js";
import { useSafeContext } from "../../hooks/useSafeContext.js";
/** @internal */
export const GroupItem = React.forwardRef(function GroupItem({ item }, ref) {
    const placement = usePopoverPlacement();
    const { setPopoverOpen } = useSafeContext(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) => {
            setPopoverOpen(newVisible);
        } },
        React.createElement(Item, { item: item, ref: ref },
            React.createElement(ExpandIndicator, null))));
});
/** @internal */
export function usePopoverPlacement() {
    const { expandsTo, panelAlignment } = useSafeContext(ToolbarContext);
    return `${expandsTo}-${panelAlignment}`;
}
/** @internal */
export function GroupMenuItem({ item, onClose }) {
    const { onItemExecuted } = useSafeContext(ToolbarContext);
    // eslint-disable-next-line @typescript-eslint/no-deprecated
    const iconSpec = useConditionalProp(item.icon);
    const label = useConditionalProp(item.label);
    const isDisabled = useConditionalProp(item.isDisabled);
    const isHidden = useConditionalProp(item.isHidden);
    const isActive = useConditionalProp(item.isActive);
    if (isHidden) {
        return null;
    }
    const subMenuItems = isDisabled ? undefined : toMenuItems(item, onClose);
    const startIcon = item.iconNode ? (React.createElement(React.Fragment, null, item.iconNode)) : (
    // eslint-disable-next-line @typescript-eslint/no-deprecated
    React.createElement(Icon, { iconSpec: iconSpec }));
    return (React.createElement(MenuItem, { startIcon: startIcon, disabled: isDisabled, subMenuItems: subMenuItems, onClick: () => {
            if (isToolbarActionItem(item)) {
                item.execute();
                onItemExecuted?.(item);
                onClose?.();
            }
        }, isSelected: isActive, "data-item-id": item.id },
        React.createElement(Badge, { badge: item.badge, badgeKind: item.badgeKind }),
        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