import { jsx } from 'react/jsx-runtime';
import { useState, useMemo, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { DragOverlay } from '../../../../../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@dnd-kit/core/dist/core.esm.mjs';
import { useLayerStore } from '../store/layer-store.mjs';

const TransformAwareDragOverlay = ({ children }) => {
  const [mountNode, setMountNode] = useState(null);
  const overlayStyle = useMemo(() => ({
    position: "fixed",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    pointerEvents: "none",
    zIndex: 9999
  }), []);
  useEffect(() => {
    const transformComponent = document.querySelector('[data-testid="transform-component"]');
    if (transformComponent) {
      setMountNode(transformComponent);
    } else {
      const editorContainer = document.getElementById("editor-panel-content");
      setMountNode(editorContainer);
    }
  }, []);
  if (!mountNode) {
    return /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children });
  }
  return createPortal(
    /* @__PURE__ */ jsx("div", { style: overlayStyle, children: /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children }) }),
    mountNode
  );
};
const DragOverlayContent = ({ layerId, componentType }) => {
  const layer = useLayerStore((state) => layerId ? state.findLayerById(layerId) : null);
  const displayName = layer?.name || layer?.type || componentType || "Component";
  if (!layer && !componentType) {
    return null;
  }
  return /* @__PURE__ */ jsx("div", { className: "mt-10 bg-white dark:bg-gray-800 shadow-lg border-2 border-primary/50 rounded-lg px-3 py-2 text-sm font-medium opacity-90 text-nowrap min-w-fit pointer-events-none", children: displayName });
};

export { DragOverlayContent, TransformAwareDragOverlay };
