import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { areObjRefsEqual, isObjRef, serializeObjRef, } from "@gooddata/sdk-model";
import { Button, NoData, Typography } from "@gooddata/sdk-ui-kit";
import { useCommonDateFilterTitle } from "../../../../../../_staging/sharedHooks/useCommonDateFilterTitle.js";
import { messages } from "../../../../../../locales.js";
import { useDashboardSelector } from "../../../../../../model/react/DashboardStoreProvider.js";
import { useDashboardUserInteraction } from "../../../../../../model/react/useDashboardUserInteraction.js";
import { selectBackendCapabilities } from "../../../../../../model/store/backendCapabilities/backendCapabilitiesSelectors.js";
import { selectEnableKDAttributeFilterDatesValidation } from "../../../../../../model/store/config/configSelectors.js";
import { isDashboardDependentDateFilter, } from "../../../../../../model/types/dateFilterTypes.js";
import { IntlWrapper } from "../../../../../localization/IntlWrapper.js";
import { AddLimitingItemDialog } from "./dialog/AddLimitingItemDialog.js";
import { LimitingItem } from "./shared/LimitingItem.js";
import { useLimitingItems } from "./shared/limitingItemsHook.js";
const extractKey = (item) => isObjRef(item) ? serializeObjRef(item) : item.localIdentifier;
function LimitValuesConfiguration({ attributeTitle, parentFilters, validParentFilters, validateElementsBy, metricsAndFacts, availableDatasets, dependentDateFilters, dependentCommonDateFilter, onLimitingItemUpdate, onParentFilterUpdate, onDependentDateFilterUpdate, }) {
    const intl = useIntl();
    const isEnabledKDAttributeFilterDatesValidation = useDashboardSelector(selectEnableKDAttributeFilterDatesValidation);
    const { attributeFilterInteraction } = useDashboardUserInteraction();
    const [isDropdownOpened, setIsDropdownOpened] = useState(false);
    const itemsWithTitles = useLimitingItems(parentFilters, validParentFilters, validateElementsBy, metricsAndFacts, dependentDateFilters, availableDatasets, isEnabledKDAttributeFilterDatesValidation, true, intl);
    const commonDateFilterTitle = useCommonDateFilterTitle(intl);
    const onOpenAddDialog = () => {
        setIsDropdownOpened(true);
        attributeFilterInteraction("attributeFilterLimitAddButtonClicked");
    };
    const onAdd = (addedItem) => {
        if (isDashboardDependentDateFilter(addedItem)) {
            onDependentDateFilterUpdate(addedItem, true, addedItem.isCommonDate);
        }
        else if (isObjRef(addedItem)) {
            onLimitingItemUpdate([...validateElementsBy, addedItem]);
        }
        else {
            onParentFilterUpdate(addedItem.localIdentifier, true);
        }
    };
    const onDelete = (deletedItem) => {
        if (isDashboardDependentDateFilter(deletedItem)) {
            onDependentDateFilterUpdate(deletedItem, false, deletedItem.isCommonDate);
            attributeFilterInteraction("attributeFilterLimitRemoveDependentDateFilterClicked");
        }
        else if (isObjRef(deletedItem)) {
            onLimitingItemUpdate(validateElementsBy.filter((item) => !areObjRefsEqual(deletedItem, item)));
            attributeFilterInteraction("attributeFilterLimitRemoveMetricClicked");
        }
        else {
            onParentFilterUpdate(deletedItem.localIdentifier, false);
            attributeFilterInteraction("attributeFilterLimitRemoveParentFilterClicked");
        }
    };
    return (_jsxs("div", { children: [isDropdownOpened ? (_jsx(AddLimitingItemDialog, { attributeTitle: attributeTitle, currentlySelectedItems: validateElementsBy, parentFilters: parentFilters, validParentFilters: validParentFilters, dependentDateFilters: dependentDateFilters, dependentCommonDateFilter: dependentCommonDateFilter, availableDatasets: availableDatasets, commonDateFilterTitle: commonDateFilterTitle, onSelect: onAdd, onClose: () => setIsDropdownOpened(false) })) : null, _jsxs("div", { className: "configuration-category attribute-filter__limit__title", children: [
                    _jsx(Typography, { tagName: "h3", children: _jsx(FormattedMessage, { id: "attributesDropdown.valuesLimiting.title" }) }), _jsx(Button, { className: "gd-button-small gd-button-link attribute-filter__limit__add-button", iconLeft: "gd-icon-plus", onClick: onOpenAddDialog, value: intl.formatMessage(messages.filterAddValuesLimit) })
                ] }), _jsx("div", { children: itemsWithTitles.length === 0 ? (_jsx(NoData, { className: "attribute-filter__limit__no-data", noDataLabel: intl.formatMessage(messages.filterAddValuesLimitNoData) })) : (_jsx(_Fragment, { children: itemsWithTitles.map(({ title, item }) => (_jsx(LimitingItem, { title: title, item: item, onDelete: () => onDelete(item) }, extractKey(item)))) })) })
        ] }));
}
export function LocalizedLimitValuesConfiguration(props) {
    const capabilities = useDashboardSelector(selectBackendCapabilities);
    if (!capabilities.supportsAttributeFilterElementsLimiting) {
        return null;
    }
    return (_jsx(IntlWrapper, { locale: props.intl.locale, children: _jsx(LimitValuesConfiguration, { ...props }) }));
}
