import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useEffect, useState } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { serializeObjRef } from "@gooddata/sdk-model";
import { DropdownList, NoData } from "@gooddata/sdk-ui-kit";
import { simplifyText } from "@gooddata/util";
import { messages } from "../../../../../../../locales.js";
import { useDashboardUserInteraction } from "../../../../../../../model/react/useDashboardUserInteraction.js";
import { LimitingItemTitle } from "../shared/LimitingItem.js";
import { useSearchableLimitingItems, } from "../shared/limitingItemsHook.js";
import { PopupHeader } from "./PopupHeader.js";
import { getTelemetryEventForLimitingItem } from "./telemetryUtils.js";
function NoLimitingItemsFound({ hasNoMatchingData }) {
    const intl = useIntl();
    return (_jsx(NoData, { className: "attribute-filter__limit__popup__no-data", hasNoMatchingData: hasNoMatchingData, notFoundLabel: intl.formatMessage(messages.filterAddValuesLimitPopupSearchNoMatch), noDataLabel: intl.formatMessage(messages.filterAddValuesLimitPopupNoMetrics) }));
}
function LimitingItem({ item: { item, title }, onSelect, onClose }) {
    const { attributeFilterInteraction } = useDashboardUserInteraction();
    const classNames = cx("gd-list-item attribute-filter__limit__popup__item", `s-metric-${simplifyText(title ?? "unknown")}`);
    const onClick = () => {
        onSelect(item);
        onClose();
        attributeFilterInteraction(getTelemetryEventForLimitingItem(item));
    };
    return (_jsx("div", { className: classNames, onClick: onClick, title: title, children: _jsx(LimitingItemTitle, { item: item, title: title }) }, serializeObjRef(item)));
}
export function LimitingItemsPage({ currentlySelectedItems, onSelect, onGoBack, onClose, }) {
    const intl = useIntl();
    const [matchingItems, setMatchingItems] = useState([]);
    const items = useSearchableLimitingItems(currentlySelectedItems);
    useEffect(() => {
        setMatchingItems(items);
    }, [items]);
    const onItemSearch = (keyword) => setMatchingItems(items.filter(({ title }) => title?.toLowerCase().includes(keyword.toLowerCase())));
    return (_jsxs(_Fragment, { children: [
            _jsx(PopupHeader, { title: intl.formatMessage(messages.filterAddMetricTitle), onGoBack: onGoBack, onClose: onClose }), _jsx("div", { className: "attribute-filter__limit__popup__list--searchable", children: _jsx(DropdownList, { width: 250, isMobile: false, showSearch: true, onSearch: onItemSearch, searchPlaceholder: intl.formatMessage(messages.filterAddValuesLimitPopupSearchPlaceholder), searchFieldSize: "small", renderNoData: (props) => _jsx(NoLimitingItemsFound, { ...props }), items: matchingItems, renderItem: ({ item }) => (_jsx(LimitingItem, { item: item, onSelect: onSelect, onClose: onClose })) }) })
        ] }));
}
//# sourceMappingURL=LimitingItemsPage.js.map