import { jsx } from 'react/jsx-runtime';
import React__default, { useMemo } from 'react';
import { GripVertical } from 'lucide-react';
import { useDraggable } 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 { CSS } from '../../../../../../../node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.2.0/node_modules/@dnd-kit/utilities/dist/utilities.esm.mjs';
import { cn } from '../../../../lib/utils.mjs';
import '../../../../lib/ui-builder/context/dnd-context-colission-utils.mjs';
import { useComponentDragContext } from '../../../../lib/ui-builder/context/dnd-contexts.mjs';
import 'react-dom';
import '../../../../lib/ui-builder/store/layer-store.mjs';
import 'zod';
import '../../../../lib/ui-builder/store/editor-store.mjs';

const DragHandle = ({
  layerId,
  layerType,
  className
}) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    isDragging
  } = useDraggable({
    id: layerId,
    data: {
      type: "layer",
      layerId,
      layerType
    }
  });
  const { setDragging } = useComponentDragContext();
  React__default.useEffect(() => {
    setDragging(!!isDragging);
    return () => setDragging(false);
  }, [isDragging, setDragging]);
  const style = useMemo(() => {
    return {
      transform: CSS.Translate.toString(transform)
    };
  }, [transform]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: setNodeRef,
      style,
      ...listeners,
      ...attributes,
      className: cn(
        "cursor-grab size-6 flex items-center justify-center active:cursor-grabbing bg-blue-500 text-white hover:bg-white hover:text-black p-1 rounded-lg z-50",
        "opacity-100 transition-opacity duration-200",
        isDragging && "cursor-grabbing opacity-0",
        className
      ),
      "data-testid": `drag-handle-${layerId}`,
      children: !isDragging && /* @__PURE__ */ jsx(GripVertical, { className: "size-3" })
    }
  );
};

export { DragHandle };
