import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { FormattedMessage } from "react-intl";
import { Typography } from "@gooddata/sdk-ui-kit";
import { useDashboardComponentsContext } from "../../../dashboardContexts/DashboardComponentsContext.js";
import { GridLayoutElement } from "../../DefaultDashboardLayoutRenderer/GridLayoutElement.js";
import { useEmptyContentHandlers } from "./useEmptyContentHandlers.js";
const widgetCategoryMapping = {
    "insight-placeholder": "insight",
    insightListItem: "visualization",
    "kpi-placeholder": "kpi",
    richTextListItem: "richText",
    visualizationSwitcherListItem: "visualizationSwitcher",
    dashboardLayoutListItem: "dashboardLayout",
};
export function EmptyDashboardDropZone() {
    const { EmptyLayoutDropZoneBodyComponent } = useDashboardComponentsContext();
    const sectionPath = {
        parent: undefined,
        sectionIndex: 0,
    };
    const { item, itemType, canDrop, isOver, dropRef } = useEmptyContentHandlers(sectionPath);
    const { gridHeight } = item?.size || {};
    const widgetCategory = widgetCategoryMapping[itemType];
    const message = widgetCategory === "visualization" || widgetCategory === "kpi" ? (_jsx(FormattedMessage, { id: "newDashboard.dropInsight" })) : (_jsx(FormattedMessage, { id: "dropzone.widget.desc", values: { b: (chunks) => _jsx("b", { children: chunks }) } }));
    const emptyDashboardDropZoneSize = {
        xl: { gridWidth: 12, gridHeight },
        lg: { gridWidth: 12, gridHeight },
        md: { gridWidth: 12, gridHeight },
        sm: { gridWidth: 12, gridHeight },
        xs: { gridWidth: 12, gridHeight },
    };
    return (_jsx(GridLayoutElement, { type: "root", layoutItemSize: emptyDashboardDropZoneSize, className: "gd-empty-dashboard-dropzone", children: _jsx(GridLayoutElement, { type: "item", layoutItemSize: emptyDashboardDropZoneSize, 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(EmptyLayoutDropZoneBodyComponent, {}), _jsx("div", { className: "drag-info-placeholder-drop-target s-drag-info-placeholder-drop-target", children: _jsx("div", { className: "drop-target-inner", children: _jsx(Typography, { tagName: "p", className: cx("drop-target-message", `${widgetCategory}-drop-target`), children: message }) }) })
                ] }) }) }));
}
