'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const LucideIcons = require('lucide-react');
const button = require('../../../button.cjs');
const layerStore = require('../../../../lib/ui-builder/store/layer-store.cjs');
const editorStore = require('../../../../lib/ui-builder/store/editor-store.cjs');
const addComponentPopover = require('./add-component-popover.cjs');
const utils = require('../../../../lib/utils.cjs');
const schemaUtils = require('../../../../lib/ui-builder/store/schema-utils.cjs');
const useLayerActions = require('../../../../lib/ui-builder/hooks/use-layer-actions.cjs');

const LayerMenu = ({ layerId }) => {
  const selectedLayer = layerStore.useLayerStore((state) => state.findLayerById(layerId));
  const isLayerAPage = layerStore.useLayerStore((state) => state.isLayerAPage(layerId));
  const [popoverOpen, setPopoverOpen] = React.useState(false);
  const componentRegistry = editorStore.useEditorStore((state) => state.registry);
  const { canDuplicate, canDelete, handleDuplicate, handleDelete } = useLayerActions.useGlobalLayerActions(layerId);
  const buttonVariantsValues = React.useMemo(() => {
    return button.buttonVariants({ variant: "ghost", size: "sm" });
  }, []);
  const buttonClass = "p-2 h-6 w-6 cursor-pointer [&_svg]:size-3 bg-blue-500 rounded-lg text-white hover:bg-white hover:text-black";
  const canRenderAddChild = React.useMemo(() => {
    if (!selectedLayer) return false;
    const componentDef = componentRegistry[selectedLayer.type];
    if (!componentDef) return false;
    return schemaUtils.canComponentAcceptChildren(componentDef.schema);
  }, [selectedLayer, componentRegistry]);
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      className: utils.cn(
        "flex flex-nowrap overflow-hidden transition-all duration-200 ease-in-out rounded-lg bg-blue-500 text-white"
      ),
      children: [
        canRenderAddChild && /* @__PURE__ */ jsxRuntime.jsx(
          addComponentPopover.AddComponentsPopover,
          {
            parentLayerId: layerId,
            className: "flex-shrink w-min inline-flex",
            onOpenChange: setPopoverOpen,
            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(buttonVariantsValues, buttonClass, popoverOpen ? "bg-white text-black" : ""), children: [
              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add Component" }),
              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "size-3" })
            ] })
          }
        ),
        canDuplicate && /* @__PURE__ */ jsxRuntime.jsxs(
          "div",
          {
            className: utils.cn(buttonVariantsValues, buttonClass),
            onClick: handleDuplicate,
            "data-testid": "duplicate-button",
            children: [
              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
                "Duplicate ",
                isLayerAPage ? "Page" : "Component"
              ] }),
              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Copy, { className: "size-3", "data-testid": "duplicate-icon" })
            ]
          }
        ),
        canDelete && /* @__PURE__ */ jsxRuntime.jsxs(
          "div",
          {
            className: utils.cn(buttonVariantsValues, buttonClass),
            onClick: handleDelete,
            "data-testid": "delete-button",
            children: [
              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
                "Delete ",
                isLayerAPage ? "Page" : "Component"
              ] }),
              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash, { className: "size-3", "data-testid": "delete-icon" })
            ]
          }
        )
      ]
    }
  ) });
};

exports.LayerMenu = LayerMenu;
