import { jsx as _jsx } from "react/jsx-runtime";
import cx from "classnames";
import { injectIntl } from "react-intl";
import { UiSkeleton } from "../@ui/UiSkeleton/UiSkeleton.js";
import { Dropdown } from "../Dropdown/Dropdown.js";
import { DropdownList } from "../Dropdown/DropdownList.js";
import { NoData } from "../NoData/NoData.js";
import { HeaderWorkspacePickerButton, } from "./HeaderWorkspacePickerButton.js";
import { HeaderWorkspacePickerItem } from "./HeaderWorkspacePickerItem.js";
const renderProjectPickerFooter = (projectPickerFooter) => {
    const comp = (closeDropdown) => projectPickerFooter ? (_jsx("div", { className: "gd-header-project-picker-footer", onKeyDown: (e) => {
            if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                // Find and click the link inside
                const link = e.currentTarget.querySelector("a");
                if (link) {
                    link.click();
                }
                closeDropdown();
            }
        }, children: _jsx("span", { onClick: closeDropdown, children: projectPickerFooter }) })) : (false);
    comp.displayName = "ProjectPickerFooter";
    return comp;
};
function CoreHeaderWorkspacePicker({ intl, isLoading, workspaces, selectedWorkspace, totalWorkspacesCount, searchString, showSearch, onOpen, onSelect, onSearch, projectPickerFooter, className, onOpenStateChanged, 
//paging props
loadNextPage, hasNextPage, skeletonItemsCount, isNextPageLoading, shouldLoadNextPage, }) {
    const dropdownClassNames = cx({
        "gd-header-project-wrapper": true,
        "gd-header-measure": true,
        [className]: !!className,
    });
    const selectedWorkspaceTitle = selectedWorkspace?.title || selectedWorkspace?.id || "";
    return (_jsx(Dropdown, { className: dropdownClassNames, closeOnParentScroll: true, closeOnMouseDrag: true, closeOnEscape: true, autofocusOnOpen: !showSearch, onOpenStateChanged: (isOpen) => {
            if (isOpen && onOpen) {
                onOpen();
            }
            if (onOpenStateChanged) {
                onOpenStateChanged(isOpen);
            }
        }, renderButton: ({ isOpen, toggleDropdown, buttonRef, accessibilityConfig }) => {
            const config = {
                ...accessibilityConfig,
                ariaHaspopup: "dialog",
                popupType: "dialog",
            };
            return (_jsx(HeaderWorkspacePickerButton, { title: selectedWorkspaceTitle, isOpen: isOpen, onClick: toggleDropdown, buttonRef: buttonRef, accessibilityConfig: config }));
        }, renderBody: ({ closeDropdown, isMobile, ariaAttributes }) => (_jsx("div", { role: "dialog", "aria-label": intl.formatMessage({ id: "gs.header.projectPicker.pickerName.aria" }), id: ariaAttributes.id, children: _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: intl.formatMessage({
                    id: "gs.header.projectPicker.searchPlaceholder.aria",
                }), searchLabel: intl.formatMessage({
                    id: "gs.header.projectPicker.searchPlaceholder.aria",
                }), renderNoData: ({ hasNoMatchingData }) => (_jsx(NoData, { className: "s-noMatchingProjects", noDataLabel: intl.formatMessage({ id: "gs.noData.noDataAvailable" }), notFoundLabel: intl.formatMessage({
                        id: "gs.header.projectPicker.noMatchingWorkspaces",
                    }), hasNoMatchingData: hasNoMatchingData })), renderItem: ({ item }) => {
                    const title = item?.title;
                    const isDemo = item?.isDemo;
                    const workspaceId = item?.id;
                    const isSelected = selectedWorkspace?.id === item?.id;
                    return (_jsx(HeaderWorkspacePickerItem, { workspaceId: workspaceId, title: title, isDemo: isDemo, isSelected: isSelected, isLoading: !item, onClick: () => {
                            if (item && onSelect) {
                                onSelect(item);
                                closeDropdown();
                            }
                        } }));
                }, loadNextPage: loadNextPage, hasNextPage: hasNextPage, skeletonItemsCount: skeletonItemsCount, isNextPageLoading: isNextPageLoading, shouldLoadNextPage: shouldLoadNextPage, SkeletonItem: () => (_jsx(UiSkeleton, { itemWidth: ["100%"], direction: "row", itemPadding: 15, itemHeight: 18, itemsCount: 1, itemsGap: 0 })), onKeyDownSelect: (item) => {
                    if (item && onSelect) {
                        onSelect(item);
                        closeDropdown();
                    }
                }, itemTitleGetter: (item) => item?.title || item?.id || "", accessibilityConfig: {
                    role: "listbox",
                    ariaLabel: intl.formatMessage({ id: "gs.header.projectPicker.workspaces" }),
                } }) })) }));
}
/**
 * @internal
 */
export const HeaderWorkspacePicker = injectIntl(CoreHeaderWorkspacePicker);
