import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2007-2026 GoodData Corporation
import { createSelector } from "@reduxjs/toolkit";
import { areObjRefsEqual, dashboardAttributeFilterItemDisplayForm, idRef, uriRef, } from "@gooddata/sdk-model";
import { IconDragHandle, ShortenedText } from "@gooddata/sdk-ui-kit";
import { useTheme } from "@gooddata/sdk-ui-theme-provider";
import { useDashboardSelector } from "../../../model/react/DashboardStoreProvider.js";
import { selectCatalogAttributes } from "../../../model/store/catalog/catalogSelectors.js";
function isDisplayFormEqual(displayForm, identifierOrUriRef) {
    return (areObjRefsEqual(idRef(displayForm.id, displayForm.type), identifierOrUriRef) ||
        areObjRefsEqual(uriRef(displayForm.uri), identifierOrUriRef));
}
const selectFilterAttribute = (filter) => createSelector(selectCatalogAttributes, (attributes) => attributes.find((attribute) => attribute.displayForms.some((displayForm) => isDisplayFormEqual(displayForm, dashboardAttributeFilterItemDisplayForm(filter)))));
export function DefaultAttributeFilterDraggingComponent({ item }) {
    const theme = useTheme();
    const filterAttribute = useDashboardSelector(selectFilterAttribute(item.filter));
    if (!filterAttribute) {
        return null;
    }
    return (_jsxs("div", { className: "attribute-filter-button is-dragging", children: [
            _jsx(IconDragHandle, { width: 7, height: 26, className: "drag-handle-icon", color: theme?.palette?.complementary?.c5 }), _jsx("div", { className: "button-content", children: _jsx("div", { className: "button-title", children: _jsx(ShortenedText, { children: filterAttribute.attribute.title }) }) })
        ] }));
}
//# sourceMappingURL=DefaultAttributeFilterDraggingComponent.js.map