import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { FormattedMessage } from "react-intl";
import { Bubble, BubbleHoverTrigger, IconAttributeFilter } from "@gooddata/sdk-ui-kit";
import { useTheme } from "@gooddata/sdk-ui-theme-provider";
import { messages } from "../../../locales.js";
import { useDashboardSelector } from "../../../model/react/DashboardStoreProvider.js";
import { selectSupportsMultipleDateFilters } from "../../../model/store/backendCapabilities/backendCapabilitiesSelectors.js";
import { selectEnableMultipleDateFilters } from "../../../model/store/config/configSelectors.js";
import { selectIsInEditMode } from "../../../model/store/renderMode/renderModeSelectors.js";
import { getDropZoneDebugStyle } from "../debug.js";
import { useDashboardDrop } from "../useDashboardDrop.js";
export function DraggableFilterDropZone({ targetIndex, onDrop }) {
    const theme = useTheme();
    const isEditMode = useDashboardSelector(selectIsInEditMode);
    const enableMultipleDateFilters = useDashboardSelector(selectEnableMultipleDateFilters);
    const supportsMultipleDateFilters = useDashboardSelector(selectSupportsMultipleDateFilters);
    const [{ canDrop, isOver, itemType }, dropRef] = useDashboardDrop(["attributeFilter-placeholder"], {
        drop: () => onDrop(targetIndex),
    }, [targetIndex]);
    const isDraggingExistingFilter = itemType !== undefined &&
        (itemType === "attributeFilter" || itemType === "dateFilter" || itemType === "measureValueFilter");
    if (!isEditMode || isDraggingExistingFilter) {
        return null;
    }
    const isActive = canDrop || isOver;
    const dropzoneClassNames = cx("attr-filter-dropzone-box", "s-last-filter-drop-position", "s-attr-filter-dropzone-box", { "attr-filter-dropzone-box-active": isActive }, { "attr-filter-dropzone-box-over": isOver });
    const debugStyle = getDropZoneDebugStyle({ isOver });
    const tooltip = enableMultipleDateFilters && supportsMultipleDateFilters
        ? messages.filterDropzoneTooltipGeneric
        : messages.filterDropzoneTooltip;
    return (_jsx("div", { className: "attr-filter-dropzone-box-outer", style: debugStyle, ref: dropRef, children: isActive ? (_jsx("div", { className: dropzoneClassNames, children: _jsx("div", { className: "attr-filter-dropzone-box-inner", children: _jsx(FormattedMessage, { id: "filterBar.filter.drop" }) }) })) : (_jsxs(BubbleHoverTrigger, { children: [
                _jsx("div", { className: dropzoneClassNames, children: _jsx("div", { className: "attr-filter-dropzone-box-inner", children: _jsx(FormattedMessage, { id: "filterBar.filter.addFilterPlaceholder", values: {
                                icon: (_jsx(IconAttributeFilter, { className: "attribute-filter-icon", width: 14, height: 14, color: theme?.palette?.complementary?.c6 })),
                            } }) }) }), _jsx(Bubble, { alignPoints: [{ align: "bc tc", offset: { x: 0, y: 0 } }], children: _jsx(FormattedMessage, { id: tooltip.id }) })
            ] })) }));
}
