import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useStoreApi } from "../../xyflow/react.js";
import { useCallback, useRef } from "react";
import { selectAddNode, selectRemoveNode, useCanvasStore } from "../../stores/canvasStore.js";
import { CanvasIcon } from "../../utils/icon-registry.js";
import { AddNodePanel } from "../AddNodePanel/index.js";
import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
import { Header, IconWrapper, NodeContainer, TextContainer } from "./BlankCanvasNode.styles.js";
const BlankCanvasNode = (props)=>{
    const nodeRef = useRef(null);
    const removeNode = useCanvasStore(selectRemoveNode);
    const addNode = useCanvasStore(selectAddNode);
    const storeApi = useStoreApi();
    const { id, selected, positionAbsoluteX, positionAbsoluteY, data } = props;
    const { label } = data;
    const handleClosePanel = useCallback(()=>{
        storeApi.getState().resetSelectedElements();
    }, [
        storeApi
    ]);
    const handleNodeSelect = useCallback((nodeItemData)=>{
        const position = {
            x: positionAbsoluteX,
            y: positionAbsoluteY
        };
        removeNode(id);
        addNode(nodeItemData.type, position);
    }, [
        id,
        removeNode,
        addNode,
        positionAbsoluteX,
        positionAbsoluteY
    ]);
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            /*#__PURE__*/ jsx(NodeContainer, {
                selected: selected,
                ref: nodeRef,
                children: /*#__PURE__*/ jsx(IconWrapper, {
                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                        icon: "plus",
                        size: 48,
                        color: "var(--canvas-foreground-de-emp)"
                    })
                })
            }),
            'string' == typeof label && /*#__PURE__*/ jsx(TextContainer, {
                children: /*#__PURE__*/ jsx(Header, {
                    children: label
                })
            }),
            /*#__PURE__*/ jsx(FloatingCanvasPanel, {
                open: selected,
                nodeId: id,
                placement: "right-start",
                offset: 20,
                children: /*#__PURE__*/ jsx(AddNodePanel, {
                    onNodeSelect: (item)=>handleNodeSelect(item.data),
                    onClose: handleClosePanel
                })
            })
        ]
    });
};
export { BlankCanvasNode };
