/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
import "./HeaderIconToolbar.scss";
import * as React from "react";
import { ButtonGroup, Divider, DropdownMenu, IconButton, MenuDivider, MenuItem, Text, Tooltip, } from "@itwin/itwinui-react";
import { SvgMore, SvgSearch } from "@itwin/itwinui-icons-react";
import { HeaderSearch } from "./HeaderSearch.js";
/**
 * Header toolbar component that displays menu icons with overflow handling.
 * Renders a button group with icons, search functionality, and an overflow menu.
 * Icons that don't fit in the available space are moved into a dropdown menu.
 * @internal
 */
export function HeaderIconToolbar(props) {
    const [searchIsExpanded, setSearchIsExpanded] = props.searchExpandedState;
    const searchState = React.useState("");
    return (React.createElement("div", { className: "nz-widget-widgetContentLayout-header-headerIconToolbar", "data-_appui-icon-size": props.iconSize, "data-_appui-search-expanded": searchIsExpanded ? "true" : "false", "data-_appui-single-item": props.menuIcons.length === 1 ? "true" : "false" },
        React.createElement(ButtonGroup, { key: String(searchIsExpanded), className: "nz-buttonGroup", overflowPlacement: "end", overflowButton: (overflowStart) => (React.createElement(DropdownMenu, { menuItems: (close) => Array(props.menuIcons.length - overflowStart)
                    .fill(null)
                    .map((_, _index) => {
                    const index = overflowStart + _index;
                    const icon = props.menuIcons.at(index);
                    if (!icon)
                        return React.createElement(React.Fragment, null);
                    return icon.type === "divider" ? (_index === 0 || searchIsExpanded ? (React.createElement(React.Fragment, { key: index })) : (React.createElement(MenuDivider, { key: index }))) : icon.type === "search" ? (!searchIsExpanded ? (React.createElement(MenuItem, { key: index, onClick: () => {
                            close();
                            setSearchIsExpanded(true);
                        }, startIcon: React.createElement(SvgSearch, null) }, "Search")) : (React.createElement(React.Fragment, { key: index }))) : icon.tooltipContent ? (React.createElement(Tooltip, { content: icon.tooltipContent, key: index },
                        React.createElement(MenuItem, { isSelected: icon.isActive, disabled: icon.disabled, key: index, onClick: () => {
                                icon.onClick();
                                close();
                            }, startIcon: React.createElement(React.Fragment, null, icon.icon) }, icon.label))) : (React.createElement(MenuItem, { isSelected: icon.isActive, disabled: icon.disabled, key: index, onClick: () => {
                            icon.onClick();
                            close();
                        }, startIcon: React.createElement(React.Fragment, null, icon.icon) }, icon.label));
                }) },
                React.createElement(IconButton, { size: props.iconSize, styleType: "borderless", "aria-label": "More" },
                    React.createElement(SvgMore, null)))) }, props.menuIcons.map((icon, index) => icon.type === "divider" ? (React.createElement(Divider, { orientation: "vertical", key: icon.key ?? `divider-${index}` })) : icon.type === "search" ? (React.createElement(HeaderSearch, { key: "search", searchExpandedState: props.searchExpandedState, searchState: searchState, iconSize: props.iconSize, onSearch: props.onSearch })) : (React.createElement(IconButton, { disabled: icon.disabled, label: icon.tooltipContent ? (React.createElement("div", { className: "nz-widget-widgetContentLayout-header-headerIconToolbar-iconButton-tooltip" },
                React.createElement(Text, { variant: "small" }, icon.label),
                React.createElement(Text, { isMuted: true, variant: "small" }, icon.tooltipContent))) : (icon.label), key: icon.label, size: props.iconSize, styleType: "borderless", onClick: icon.onClick, labelProps: { placement: "bottom" }, isActive: icon.isActive, className: "nz-iconButton" }, icon.icon))))));
}
//# sourceMappingURL=HeaderIconToolbar.js.map