import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import { useMemo } from "react";
import cx from "classnames";
import { insightVisualizationType, widgetRef } from "@gooddata/sdk-model";
import { useDashboardSelector } from "../../../../model/react/DashboardStoreProvider.js";
import { useWidgetSelection } from "../../../../model/react/useWidgetSelection.js";
import { selectIsDashboardSaving } from "../../../../model/store/saving/savingSelectors.js";
import { useDashboardComponentsContext } from "../../../dashboardContexts/DashboardComponentsContext.js";
import { useIsDraggingWidget } from "../../../dragAndDrop/draggableWidget/useIsDraggingWidget.js";
import { DashboardItem } from "../../../presentationComponents/DashboardItems/DashboardItem.js";
import { DashboardItemVisualization } from "../../../presentationComponents/DashboardItems/DashboardItemVisualization.js";
import { getVisTypeCssClass } from "../../../presentationComponents/DashboardItems/utils.js";
import { DashboardInsight } from "../../insight/DashboardInsight.js";
import { DashboardWidgetInsightGuard } from "./DashboardWidgetInsightGuard.js";
import { EditableDashboardInsightWidgetHeader } from "./EditableDashboardInsightWidgetHeader.js";
import { useEditableInsightMenu } from "./useEditableInsightMenu.js";
export function EditableDashboardInsightWidget(props) {
    return _jsx(DashboardWidgetInsightGuard, { ...props, Component: EditableDashboardInsightWidgetCore });
}
/**
 * @internal
 */
function EditableDashboardInsightWidgetCore({ widget, insight, screen, onError, onExportReady, onLoadingChanged, dashboardItemClasses, }) {
    const visType = insight ? insightVisualizationType(insight) : undefined;
    const { isSelectable, isSelected, onSelected, closeConfigPanel, hasConfigPanelOpen } = useWidgetSelection(widgetRef(widget));
    const { menuItems } = useEditableInsightMenu({ closeMenu: closeConfigPanel, insight, widget });
    const { InsightMenuComponentProvider, ErrorComponent, LoadingComponent } = useDashboardComponentsContext();
    const InsightMenuComponent = useMemo(() => InsightMenuComponentProvider(insight, widget), [InsightMenuComponentProvider, insight, widget]);
    const isSaving = useDashboardSelector(selectIsDashboardSaving);
    const isEditable = !isSaving;
    const isDraggingWidget = useIsDraggingWidget();
    return (_jsx(DashboardItem, { className: cx(dashboardItemClasses, "type-visualization", "gd-dashboard-view-widget", "is-edit-mode", getVisTypeCssClass(widget.type, visType), { "is-selected": isSelected }), screen: screen, children: _jsx(DashboardItemVisualization, { isSelectable: isSelectable, isSelected: isSelected, onSelected: onSelected, renderHeadline: (clientHeight) => !widget.configuration?.hideTitle && (_jsx(EditableDashboardInsightWidgetHeader, { clientHeight: clientHeight, widget: widget, insight: insight })), renderAfterContent: () => {
                return (_jsx(_Fragment, { children: !!hasConfigPanelOpen && (_jsx(InsightMenuComponent, { insight: insight, widget: widget, isOpen: hasConfigPanelOpen, onClose: closeConfigPanel, items: menuItems })) }));
            }, contentClassName: cx({ "is-editable": isEditable, "is-dragging-widget": isDraggingWidget }), visualizationClassName: cx({ "is-editable": isEditable }), children: ({ clientHeight, clientWidth }) => (_jsx(DashboardInsight, { clientHeight: clientHeight, clientWidth: clientWidth, insight: insight, widget: widget, onExportReady: onExportReady, onLoadingChanged: onLoadingChanged, onError: onError, ErrorComponent: ErrorComponent, LoadingComponent: LoadingComponent })) }) }));
}
//# sourceMappingURL=EditableDashboardInsightWidget.js.map