"use client";
import { jsx } from 'react/jsx-runtime';
import React__default, { useCallback, useMemo } from 'react';
import { useGlobalLayerActions } from '../../../../lib/ui-builder/hooks/use-layer-actions.mjs';
import { useEditorStore } from '../../../../lib/ui-builder/store/editor-store.mjs';
import { useKeyboardShortcuts } from '../../../../hooks/use-keyboard-shortcuts.mjs';
import { SHORTCUTS } from '../../../../lib/ui-builder/shortcuts/shortcut-registry.mjs';

const LayerContextMenu = ({
  layerId,
  isSelected,
  onSelect,
  children,
  className,
  style
}) => {
  const openContextMenu = useEditorStore((state) => state.openContextMenu);
  const {
    handleCopy,
    handleCut,
    handlePaste,
    handleDelete,
    handleDuplicate,
    getCanPaste
  } = useGlobalLayerActions(layerId);
  const handleContextMenu = useCallback(
    (e) => {
      e.preventDefault();
      e.stopPropagation();
      if (!isSelected) {
        onSelect(layerId);
      }
      openContextMenu(e.clientX, e.clientY, layerId);
    },
    [isSelected, layerId, onSelect, openContextMenu]
  );
  const isInputFocused = useCallback(() => {
    const activeElement = document.activeElement;
    if (!activeElement) return false;
    const tagName = activeElement.tagName.toLowerCase();
    const isContentEditable = activeElement.isContentEditable;
    return tagName === "input" || tagName === "textarea" || isContentEditable;
  }, []);
  const keyCombinations = useMemo(() => {
    if (!isSelected) return [];
    return [
      {
        keys: SHORTCUTS.copy.keys,
        key: SHORTCUTS.copy.key,
        preventDefault: false,
        handler: (e) => {
          if (isInputFocused()) return;
          e.preventDefault();
          handleCopy();
        }
      },
      {
        keys: SHORTCUTS.cut.keys,
        key: SHORTCUTS.cut.key,
        preventDefault: false,
        handler: (e) => {
          if (isInputFocused()) return;
          e.preventDefault();
          handleCut();
        }
      },
      {
        keys: SHORTCUTS.paste.keys,
        key: SHORTCUTS.paste.key,
        preventDefault: false,
        handler: (e) => {
          if (isInputFocused()) return;
          if (!getCanPaste()) return;
          e.preventDefault();
          handlePaste();
        }
      },
      {
        keys: SHORTCUTS.duplicate.keys,
        key: SHORTCUTS.duplicate.key,
        preventDefault: false,
        handler: (e) => {
          if (isInputFocused()) return;
          e.preventDefault();
          handleDuplicate();
        }
      },
      {
        keys: SHORTCUTS.delete.keys,
        key: SHORTCUTS.delete.key,
        preventDefault: false,
        handler: (e) => {
          if (isInputFocused()) return;
          e.preventDefault();
          handleDelete();
        }
      }
    ];
  }, [isSelected, handleCopy, handleCut, handlePaste, handleDuplicate, handleDelete, getCanPaste, isInputFocused]);
  useKeyboardShortcuts(keyCombinations);
  if (React__default.isValidElement(children)) {
    return React__default.cloneElement(children, {
      onContextMenu: handleContextMenu,
      className: className ? `${children.props.className || ""} ${className}`.trim() : children.props.className,
      style: style ? { ...children.props.style, ...style } : children.props.style
    });
  }
  return /* @__PURE__ */ jsx(
    "span",
    {
      onContextMenu: handleContextMenu,
      className,
      style,
      children
    }
  );
};

export { LayerContextMenu };
