'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const LucideIcons = require('lucide-react');
const core_esm = require('../../../../../../../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.cjs');
const utilities_esm = require('../../../../../../../node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.2.0/node_modules/@dnd-kit/utilities/dist/utilities.esm.cjs');
const utils = require('../../../../lib/utils.cjs');
require('../../../../lib/ui-builder/context/dnd-context-colission-utils.cjs');
const dndContexts = require('../../../../lib/ui-builder/context/dnd-contexts.cjs');
require('react-dom');
require('../../../../lib/ui-builder/store/layer-store.cjs');
require('zod');
require('../../../../lib/ui-builder/store/editor-store.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }

const React__default = /*#__PURE__*/_interopDefaultCompat(React);

const DragHandle = ({
  layerId,
  layerType,
  className
}) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    isDragging
  } = core_esm.useDraggable({
    id: layerId,
    data: {
      type: "layer",
      layerId,
      layerType
    }
  });
  const { setDragging } = dndContexts.useComponentDragContext();
  React__default.useEffect(() => {
    setDragging(!!isDragging);
    return () => setDragging(false);
  }, [isDragging, setDragging]);
  const style = React.useMemo(() => {
    return {
      transform: utilities_esm.CSS.Translate.toString(transform)
    };
  }, [transform]);
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      ref: setNodeRef,
      style,
      ...listeners,
      ...attributes,
      className: utils.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__ */ jsxRuntime.jsx(LucideIcons.GripVertical, { className: "size-3" })
    }
  );
};

exports.DragHandle = DragHandle;
