import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useEffect } from "react";
import cx from "classnames";
import { FormattedMessage, defineMessages } from "react-intl";
import { Typography } from "@gooddata/sdk-ui-kit";
import { useDashboardItemPathAndSize } from "../../../dashboard/components/DashboardItemPathAndSizeContext.js";
import { useEmptyContentHandlers } from "./useEmptyContentHandlers.js";
import { useWidgetDragHoverHandlers } from "./useWidgetDragHoverHandlers.js";
const widgetCategoryMapping = {
    "insight-placeholder": "insight",
    insightListItem: "visualization",
    "kpi-placeholder": "kpi",
    richTextListItem: "richText",
    visualizationSwitcherListItem: "visualizationSwitcher",
    dashboardLayoutListItem: "dashboardLayout",
};
const messages = defineMessages({
    dropZoneMessage: {
        id: "nestedLayout.emptyDropZone.message",
    },
    dropZoneMessageActive: {
        id: "nestedLayout.emptyDropZone.active.message",
    },
});
export function DropZoneMessage({ canDrop = false }) {
    return (_jsx(Typography, { tagName: "p", className: "drop-target-message", children: _jsx(FormattedMessage, { id: canDrop ? messages.dropZoneMessageActive.id : messages.dropZoneMessage.id, values: {
                b: (chunks) => _jsx("b", { children: chunks }),
                br: _jsx("br", {}),
            } }) }));
}
export function DefaultEmptyNestedLayoutDropZoneBody() {
    return (_jsx("div", { className: "drag-info-placeholder-box drag-info-empty-nested-layout s-drag-info-placeholder-box", children: _jsx(DropZoneMessage, {}) }));
}
export function EmptyNestedLayoutDropZone() {
    const { layoutItemPath } = useDashboardItemPathAndSize();
    const sectionPath = {
        parent: layoutItemPath,
        sectionIndex: 0,
    };
    const { itemType, canDrop, isOver, dropRef } = useEmptyContentHandlers(sectionPath);
    const { handleDragHoverEnd } = useWidgetDragHoverHandlers();
    useEffect(() => {
        if (isOver) {
            // hide section end drop zone in case when user drags widget to empty nested layout drag zone
            handleDragHoverEnd();
        }
    }, [isOver, handleDragHoverEnd]);
    const widgetCategory = widgetCategoryMapping[itemType];
    return (_jsx("div", { className: cx("drag-info-placeholder", "dash-item", {
            [`type-${widgetCategory}`]: !!widgetCategory,
            "type-none": !widgetCategory,
            "s-last-drop-position": canDrop,
        }), children: _jsxs("div", { className: cx("drag-info-placeholder-inner", { "can-drop": canDrop, "is-over": isOver }), ref: dropRef, children: [
                _jsx(DefaultEmptyNestedLayoutDropZoneBody, {}), _jsx("div", { className: "drag-info-placeholder-drop-target s-drag-info-placeholder-drop-target", children: _jsx("div", { className: "drop-target-inner", children: _jsx(DropZoneMessage, { canDrop: canDrop }) }) })
            ] }) }));
}
