import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { useCallback } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { DefaultUiMenuContent, DefaultUiMenuHeader, UiIconButton, getItemInteractiveParent, typedUiMenuContextStore, } from "@gooddata/sdk-ui-kit";
import { DashboardInsightMenuTitle } from "../../DashboardInsightMenuTitle.js";
import { DashboardInsightMenuItemButton } from "./DashboardInsightMenuItemButton.js";
import { DashboardInsightSubmenuContainer } from "./DashboardInsightSubmenuContainer.js";
function FocusableItemComponent({ item, isFocused, }) {
    const { id, isDisabled, stringTitle } = item;
    const { icon, className, subMenu, tooltip } = item.data ?? {};
    const itemClassName = cx("gd-menu-item", className, {
        "gd-ui-kit-menu__item--isFocused": isFocused,
        "is-disabled": isDisabled,
    });
    return (_jsx(DashboardInsightMenuItemButton, { itemId: id, itemName: stringTitle, disabled: isDisabled, submenu: subMenu, icon: icon, className: itemClassName, tooltip: tooltip, isFocused: isFocused }, id));
}
export function CustomUiMenuInteractiveItemComponent({ item, isFocused, }) {
    return _jsx(FocusableItemComponent, { item: item, isFocused: isFocused });
}
export function CustomUiMenuContentItemComponent({ item, isFocused, }) {
    return _jsx(FocusableItemComponent, { item: item, isFocused: isFocused });
}
export function CustomUiMenuContentComponent({ item }) {
    const { useContextStore, createSelector } = typedUiMenuContextStore();
    const selector = createSelector((ctx) => ({
        onClose: ctx.onClose,
        setShownCustomContentItemId: ctx.setShownCustomContentItemId,
        popShownSubview: ctx.popShownSubview,
        shownSubview: ctx.shownSubview,
    }));
    const { onClose, setShownCustomContentItemId, popShownSubview, shownSubview } = useContextStore(selector);
    const handleBack = useCallback(() => {
        if (shownSubview?.length > 0) {
            popShownSubview();
            return;
        }
        setShownCustomContentItemId(undefined);
    }, [setShownCustomContentItemId, popShownSubview, shownSubview]);
    if (item.showComponentOnly === true) {
        return _jsx(DefaultUiMenuContent, { item: item });
    }
    const itemWithoutDefaultHeader = {
        ...item,
        showComponentOnly: true,
    };
    const activeSubview = shownSubview.at(-1);
    const title = activeSubview?.title ?? item.stringTitle;
    const tooltipText = activeSubview?.tooltipText;
    return (_jsx(DashboardInsightSubmenuContainer, { title: title, tooltipText: tooltipText, onClose: onClose, onBack: handleBack, children: _jsx(DefaultUiMenuContent, { item: itemWithoutDefaultHeader }) }));
}
export function CustomUiMenuHeaderComponent() {
    const { formatMessage } = useIntl();
    const { useContextStore, createSelector } = typedUiMenuContextStore();
    const selector = createSelector((ctx) => ({
        menuCtxData: ctx.menuCtxData,
        onClose: ctx.onClose,
        parentItem: ctx.focusedItem ? getItemInteractiveParent(ctx.items, ctx.focusedItem.id) : undefined,
    }));
    const { menuCtxData, parentItem, onClose } = useContextStore(selector);
    if (parentItem?.data.renderSubmenuComponentOnly) {
        return null;
    }
    return !parentItem && menuCtxData ? (_jsxs("div", { className: "insight-configuration-panel-header", children: [
            _jsx(DashboardInsightMenuTitle, { widget: menuCtxData.widget, insight: menuCtxData.insight, renderMode: menuCtxData.renderMode }), _jsx(UiIconButton, { size: "small", variant: "bare", icon: "close", label: formatMessage({ id: "menu.close" }), onClick: onClose, dataId: "s-configuration-panel-header-close-button", dataTestId: "s-configuration-panel-header-close-button" })
        ] })) : (_jsx(DefaultUiMenuHeader, {}));
}
//# sourceMappingURL=CustomUiMenuComponents.js.map