import { jsx as _jsx } from "react/jsx-runtime";
import cx from "classnames";
import { injectIntl } from "react-intl";
import { HeaderWorkspacePickerButton } from "./HeaderWorkspacePickerButton.js";
import { HeaderWorkspacePickerItem } from "./HeaderWorkspacePickerItem.js";
import { Dropdown, DropdownList } from "../Dropdown/index.js";
import { NoData } from "../NoData/index.js";
const renderProjectPickerFooter = (projectPickerFooter) => {
    const comp = (closeDropdown) => projectPickerFooter ? (_jsx("div", { className: "gd-header-project-picker-footer", children: _jsx("span", { onClick: closeDropdown, children: projectPickerFooter }) })) : (false);
    comp.displayName = "ProjectPickerFooter";
    return comp;
};
export function CoreHeaderWorkspacePicker({ intl, isLoading, workspaces, selectedWorkspace, totalWorkspacesCount, searchString, showSearch, onOpen, onSelect, onSearch, onScrollEnd, projectPickerFooter, className, isRenamingProjectToWorkspaceEnabled, }) {
    const t = intl.formatMessage;
    const dropdownClassNames = cx({
        "gd-header-project-wrapper": true,
        "gd-header-measure": true,
        [className]: !!className,
    });
    const noMatchingWorkspacesId = isRenamingProjectToWorkspaceEnabled
        ? "gs.header.projectPicker.noMatchingWorkspaces"
        : "gs.header.projectPicker.noMatchingProjects";
    return (_jsx(Dropdown, { className: dropdownClassNames, closeOnParentScroll: true, closeOnMouseDrag: true, closeOnEscape: true, autofocusOnOpen: !showSearch, onOpenStateChanged: (isOpen) => {
            if (isOpen && onOpen) {
                onOpen();
            }
        }, renderButton: ({ isOpen, toggleDropdown, dropdownId, buttonRef }) => (_jsx(HeaderWorkspacePickerButton, { title: selectedWorkspace?.title, isOpen: isOpen, onClick: toggleDropdown, dropdownId: dropdownId, buttonRef: buttonRef })), renderBody: ({ closeDropdown, isMobile }) => (_jsx(DropdownList, { footer: renderProjectPickerFooter(projectPickerFooter), closeDropdown: closeDropdown, className: "project-picker-dropdown", width: 350, isMobile: isMobile, showSearch: showSearch, searchString: searchString, items: workspaces, itemsCount: totalWorkspacesCount, isLoading: isLoading, onSearch: onSearch, searchFieldSize: "normal", searchPlaceholder: t({ id: "gs.header.projectPicker.searchPlaceholder" }), searchLabel: t({ id: "gs.header.projectPicker.searchLabel" }), renderNoData: ({ hasNoMatchingData }) => (_jsx(NoData, { className: "s-noMatchingProjects", noDataLabel: t({ id: "gs.noData.noDataAvailable" }), notFoundLabel: t({ id: noMatchingWorkspacesId }), hasNoMatchingData: hasNoMatchingData })), renderItem: ({ item }) => {
                const title = item?.title;
                const isDemo = item?.isDemo;
                const isSelected = selectedWorkspace && item && selectedWorkspace.id === item.id;
                return (_jsx(HeaderWorkspacePickerItem, { title: title, isDemo: isDemo, isSelected: isSelected, isLoading: !item, onClick: () => {
                        if (item && onSelect) {
                            onSelect(item);
                            closeDropdown();
                        }
                    } }));
            }, onScrollEnd: onScrollEnd })) }));
}
/**
 * @internal
 */
export const HeaderWorkspacePicker = injectIntl(CoreHeaderWorkspacePicker);
//# sourceMappingURL=HeaderWorkspacePicker.js.map