import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import cx from "classnames";
import { FormattedMessage } from "react-intl";
import { IconSmallDragHandle } from "@gooddata/sdk-ui-kit";
import { eagerRemoveSectionItemByWidgetRef, toggleLayoutDirection, toggleLayoutSectionHeaders, } from "../../../../model/commands/layout.js";
import { useDashboardDispatch, useDashboardSelector, } from "../../../../model/react/DashboardStoreProvider.js";
import { useWidgetSelection } from "../../../../model/react/useWidgetSelection.js";
import { selectIsDashboardSaving } from "../../../../model/store/saving/savingSelectors.js";
import { useScreenSize } from "../../../dashboard/components/DashboardScreenSizeContext.js";
import { useIsDraggingWidget } from "../../../dragAndDrop/draggableWidget/useIsDraggingWidget.js";
import { DashboardItem } from "../../../presentationComponents/DashboardItems/DashboardItem.js";
import { DashboardItemBase } from "../../../presentationComponents/DashboardItems/DashboardItemBase.js";
import { DashboardLayout } from "../../dashboardLayout/DashboardLayout.js";
import { Toolbar } from "./Toolbar.js";
/**
 * @internal
 */
export function EditableDashboardNestedLayoutWidget({ widget, layout, parentLayoutItemSize, parentLayoutPath, dashboardItemClasses, }) {
    const screen = useScreenSize();
    const dispatch = useDashboardDispatch();
    const { isSelectable, isSelected, onSelected, closeConfigPanel, hasConfigPanelOpen } = useWidgetSelection(widget?.ref);
    const isSaving = useDashboardSelector(selectIsDashboardSaving);
    const isEditable = !isSaving;
    const isDraggingWidget = useIsDraggingWidget();
    return (_jsx(_Fragment, { children: _jsx(DashboardItem, { className: cx(dashboardItemClasses, "gd-dashboard-nested-layout-widget", "gd-dashboard-view-widget", "is-edit-mode", {
                "is-selected": isSelected,
            }), screen: screen, children: _jsx(DashboardItemBase, { isSelectable: isSelectable, isSelected: isSelected, onSelected: onSelected, visualizationClassName: "gd-dashboard-nested-layout-widget-visualization-content", contentClassName: cx("gd-dashboard-nested-layout-content", {
                    "is-editable": isEditable,
                    "is-dragging-widget": isDraggingWidget,
                }), renderAfterContent: () => {
                    return (_jsx(_Fragment, { children: hasConfigPanelOpen ? (_jsx(Toolbar, { layout: layout, onWidgetDelete: () => dispatch(eagerRemoveSectionItemByWidgetRef(widget.ref)), onToggleHeaders: (areSectionHeadersEnabled) => {
                                dispatch(toggleLayoutSectionHeaders(parentLayoutPath, areSectionHeadersEnabled));
                            }, onWidgetDirectionChanged: (direction) => {
                                dispatch(toggleLayoutDirection(parentLayoutPath, direction));
                            }, onClose: closeConfigPanel })) : null }));
                }, children: ({ clientWidth, clientHeight }) => (_jsxs(_Fragment, { children: [
                        _jsxs("div", { className: cx("gd-dashboard-nested-layout-tab", {
                                "is-selected": isSelected,
                            }), children: [
                                _jsx(IconSmallDragHandle, { className: "gd-dashboard-nested-layout-tab__icon" }), _jsx("div", { className: "gd-dashboard-nested-layout-tab__text", children: _jsx(FormattedMessage, { id: "nestedLayout.tab.title" }) })
                            ] }), _jsx(DashboardLayout, { widget: widget, layout: layout, clientHeight: clientHeight, clientWidth: clientWidth, parentLayoutItemSize: parentLayoutItemSize, parentLayoutPath: parentLayoutPath })
                    ] })) }) }) }));
}
//# sourceMappingURL=EditableDashboardNestedLayoutWidget.js.map