import { jsx, jsxs } from "react/jsx-runtime";
import { ConnectionMode, ReactFlow } from "../../xyflow/react.js";
import { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useState } from "react";
import { useToolbarActionStore } from "../../hooks/ToolbarActionContext.js";
import { BASE_CANVAS_DEFAULTS, PAN_ON_DRAG } from "./BaseCanvas.constants.js";
import { useAutoLayout, useEnsureNodesInView, useMaintainNodesInView } from "./BaseCanvas.hooks.js";
import { CanvasBackground } from "./CanvasBackground.js";
import { CanvasProviders } from "./CanvasProviders.js";
import { PanShortcutTeachingUI } from "./PanShortcutTeachingUI.js";
const BaseCanvasInnerComponent = (props)=>{
    const { innerRef, fitViewOptions: fitViewOptionsProps, ...canvasProps } = props;
    const fitViewOptions = fitViewOptionsProps ?? BASE_CANVAS_DEFAULTS.fitViewOptions;
    const { nodes = [], edges = [], nodeTypes, edgeTypes, children, mode = 'view', showBackground = true, backgroundColor = BASE_CANVAS_DEFAULTS.background.color, backgroundSecondaryColor = BASE_CANVAS_DEFAULTS.background.bgColor, backgroundVariant = BASE_CANVAS_DEFAULTS.background.variant, backgroundGap = BASE_CANVAS_DEFAULTS.background.gap, backgroundSize = BASE_CANVAS_DEFAULTS.background.size, isDarkMode, locale, minZoom = BASE_CANVAS_DEFAULTS.zoom.min, maxZoom = BASE_CANVAS_DEFAULTS.zoom.max, defaultViewport = BASE_CANVAS_DEFAULTS.defaultViewport, defaultEdgeOptions = BASE_CANVAS_DEFAULTS.edge, onNodesChange, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onNodeClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onPaneClick, onInit, onSelectionChange, proOptions = BASE_CANVAS_DEFAULTS.pro, connectionMode = ConnectionMode.Loose, connectionLineComponent, connectionLineStyle, deleteKeyCode = null, selectNodesOnDrag = true, nodesDraggable = true, nodesConnectable = true, elementsSelectable = true, onlyRenderVisibleElements = true, zoomOnDoubleClick = true, snapToGrid = BASE_CANVAS_DEFAULTS.snapToGrid, snapGrid = BASE_CANVAS_DEFAULTS.snapGrid, initialAutoLayout, maintainNodesInView, onToolbarAction, breakpoints, panShortcutTeachingUIMessage = 'Hold Space and drag to pan around the canvas!', ...reactFlowProps } = canvasProps;
    const isInteractive = 'readonly' !== mode;
    const isDesignMode = 'design' === mode;
    const [reactFlowInstance, setReactFlowInstance] = useState();
    const { isReady } = useAutoLayout(nodes, initialAutoLayout, fitViewOptions);
    const { ensureNodesInView, ensureAllNodesInView, centerNode } = useEnsureNodesInView();
    useMaintainNodesInView(maintainNodesInView, fitViewOptions);
    useToolbarActionStore(mode, onToolbarAction, breakpoints);
    const handleInit = useCallback((instance)=>{
        setReactFlowInstance(instance);
        onInit?.(instance);
    }, [
        onInit
    ]);
    useImperativeHandle(innerRef, ()=>({
            ensureNodesInView,
            ensureAllNodesInView,
            centerNode,
            reactFlow: reactFlowInstance
        }), [
        ensureNodesInView,
        ensureAllNodesInView,
        centerNode,
        reactFlowInstance
    ]);
    const reactFlowStyle = useMemo(()=>({
            opacity: isReady ? 1 : 0,
            transition: BASE_CANVAS_DEFAULTS.transitions.opacity
        }), [
        isReady
    ]);
    return /*#__PURE__*/ jsx(CanvasProviders, {
        nodes: nodes,
        edges: edges,
        mode: mode,
        isDarkMode: isDarkMode,
        locale: locale,
        children: /*#__PURE__*/ jsxs(ReactFlow, {
            ...reactFlowProps,
            colorMode: '',
            nodes: nodes,
            edges: edges,
            nodeTypes: nodeTypes,
            edgeTypes: edgeTypes,
            fitViewOptions: fitViewOptions,
            defaultEdgeOptions: defaultEdgeOptions,
            defaultViewport: defaultViewport,
            proOptions: proOptions,
            connectionMode: connectionMode,
            connectionLineComponent: connectionLineComponent,
            connectionLineStyle: connectionLineStyle,
            deleteKeyCode: isDesignMode ? deleteKeyCode : null,
            selectNodesOnDrag: isInteractive && selectNodesOnDrag,
            nodesDraggable: isDesignMode && nodesDraggable,
            nodesConnectable: isDesignMode && nodesConnectable,
            elementsSelectable: isInteractive && elementsSelectable,
            onlyRenderVisibleElements: onlyRenderVisibleElements,
            snapToGrid: snapToGrid,
            snapGrid: snapGrid,
            minZoom: minZoom,
            maxZoom: maxZoom,
            panOnScroll: isInteractive,
            zoomOnScroll: isInteractive,
            zoomOnDoubleClick: isInteractive && zoomOnDoubleClick,
            panOnDrag: isInteractive ? PAN_ON_DRAG : false,
            onInit: handleInit,
            onNodesChange: isInteractive ? onNodesChange : void 0,
            onEdgesChange: isInteractive ? onEdgesChange : void 0,
            onConnect: isDesignMode ? onConnect : void 0,
            onConnectStart: isDesignMode ? onConnectStart : void 0,
            onConnectEnd: isDesignMode ? onConnectEnd : void 0,
            onNodeClick: isInteractive ? onNodeClick : void 0,
            onNodeDragStart: isDesignMode ? onNodeDragStart : void 0,
            onNodeDrag: isDesignMode ? onNodeDrag : void 0,
            onNodeDragStop: isDesignMode ? onNodeDragStop : void 0,
            onPaneClick: isInteractive ? onPaneClick : void 0,
            onSelectionChange: onSelectionChange,
            style: reactFlowStyle,
            elevateEdgesOnSelect: isDesignMode,
            children: [
                showBackground && /*#__PURE__*/ jsx(CanvasBackground, {
                    color: backgroundColor,
                    bgColor: backgroundSecondaryColor,
                    variant: backgroundVariant,
                    gap: backgroundGap,
                    size: backgroundSize
                }),
                'design' === mode && panShortcutTeachingUIMessage && /*#__PURE__*/ jsx(PanShortcutTeachingUI, {
                    message: panShortcutTeachingUIMessage
                }),
                children
            ]
        })
    });
};
const BaseCanvasInner = /*#__PURE__*/ memo(BaseCanvasInnerComponent);
const BaseCanvas_BaseCanvas = /*#__PURE__*/ forwardRef(function(props, ref) {
    return /*#__PURE__*/ jsx(BaseCanvasInner, {
        ...props,
        innerRef: ref
    });
});
export { BaseCanvas_BaseCanvas as BaseCanvas };
