import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { useState, useMemo } from 'react';
import { Plus, Copy, Trash } from 'lucide-react';
import { buttonVariants } from '../../../button.mjs';
import { useLayerStore } from '../../../../lib/ui-builder/store/layer-store.mjs';
import { useEditorStore } from '../../../../lib/ui-builder/store/editor-store.mjs';
import { AddComponentsPopover } from './add-component-popover.mjs';
import { cn } from '../../../../lib/utils.mjs';
import { hasAnyChildrenField, hasChildrenFieldOfTypeString } from '../../../../lib/ui-builder/store/schema-utils.mjs';

const LayerMenu = ({
  layerId,
  handleDuplicateComponent,
  handleDeleteComponent
}) => {
  const selectedLayer = useLayerStore((state) => state.findLayerById(layerId));
  const isLayerAPage = useLayerStore((state) => state.isLayerAPage(layerId));
  const [popoverOpen, setPopoverOpen] = useState(false);
  const componentRegistry = useEditorStore((state) => state.registry);
  const allowPagesCreation = useEditorStore(
    (state) => state.allowPagesCreation
  );
  const allowPagesDeletion = useEditorStore(
    (state) => state.allowPagesDeletion
  );
  const canDuplicate = !isLayerAPage || allowPagesCreation;
  const canDelete = !isLayerAPage || allowPagesDeletion;
  const buttonVariantsValues = useMemo(() => {
    return 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 = useMemo(() => {
    if (!selectedLayer) return false;
    const componentDef = componentRegistry[selectedLayer.type];
    if (!componentDef) return false;
    const canAddChildren = "shape" in componentDef.schema && hasAnyChildrenField(componentDef.schema) && !hasChildrenFieldOfTypeString(componentDef.schema);
    return canAddChildren;
  }, [selectedLayer, componentRegistry]);
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "flex flex-nowrap overflow-hidden transition-all duration-200 ease-in-out rounded-lg bg-blue-500 text-white"
      ),
      children: [
        canRenderAddChild && /* @__PURE__ */ jsx(
          AddComponentsPopover,
          {
            parentLayerId: layerId,
            className: "flex-shrink w-min inline-flex",
            onOpenChange: setPopoverOpen,
            children: /* @__PURE__ */ jsxs("div", { className: cn(buttonVariantsValues, buttonClass, popoverOpen ? "bg-white text-black" : ""), children: [
              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add Component" }),
              /* @__PURE__ */ jsx(Plus, { className: "size-3" })
            ] })
          }
        ),
        canDuplicate && /* @__PURE__ */ jsxs(
          "div",
          {
            className: cn(buttonVariantsValues, buttonClass),
            onClick: handleDuplicateComponent,
            "data-testid": "duplicate-button",
            children: [
              /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
                "Duplicate ",
                isLayerAPage ? "Page" : "Component"
              ] }),
              /* @__PURE__ */ jsx(Copy, { className: "size-3", "data-testid": "duplicate-icon" })
            ]
          }
        ),
        canDelete && /* @__PURE__ */ jsxs(
          "div",
          {
            className: cn(buttonVariantsValues, buttonClass),
            onClick: handleDeleteComponent,
            "data-testid": "delete-button",
            children: [
              /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
                "Delete ",
                isLayerAPage ? "Page" : "Component"
              ] }),
              /* @__PURE__ */ jsx(Trash, { className: "size-3", "data-testid": "delete-icon" })
            ]
          }
        )
      ]
    }
  ) });
};

export { LayerMenu };
