'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const LucideIcons = require('lucide-react');
const layerStore = require('../../../../lib/ui-builder/store/layer-store.cjs');
const button = require('../../../button.cjs');
const badge = require('../../../badge.cjs');
const addComponentPopover = require('../components/add-component-popover.cjs');
const layerUtils = require('../../../../lib/ui-builder/store/layer-utils.cjs');

function ChildrenSearchableSelect({ layer, onChange }) {
  const { selectLayer, removeLayer, selectedLayerId, findLayerById } = layerStore.useLayerStore();
  const selectedLayer = findLayerById(selectedLayerId);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-4", children: [
    /* @__PURE__ */ jsxRuntime.jsx(addComponentPopover.AddComponentsPopover, { parentLayerId: layer.id, onChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
      button.Button,
      {
        variant: "outline",
        role: "combobox",
        className: "w-full justify-between",
        children: [
          "Add Component",
          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
        ]
      }
    ) }),
    layerUtils.hasLayerChildren(layer) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex gap-2 flex-wrap", children: selectedLayer && layerUtils.hasLayerChildren(selectedLayer) && selectedLayer.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
      ChildLayerBadge,
      {
        child,
        selectLayer,
        removeLayer
      },
      child.id
    )) })
  ] });
}
function ChildLayerBadge({ child, selectLayer, removeLayer }) {
  const handleSelect = React.useCallback(() => {
    selectLayer(child.id);
  }, [selectLayer, child.id]);
  const handleRemove = React.useCallback(() => {
    removeLayer(child.id);
  }, [removeLayer, child.id]);
  return /* @__PURE__ */ jsxRuntime.jsxs(badge.Badge, { className: "flex items-center space-x-2 pl-2 pr-0 py-0", variant: "secondary", children: [
    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { className: "p-0 h-5", variant: "link", size: "sm", onClick: handleSelect, children: nameForLayer(child) }),
    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { className: "p-0 size-6 rounded-full", variant: "ghost", size: "icon", onClick: handleRemove, children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "w-4 h-4" }) })
  ] }, child.id);
}
const nameForLayer = (layer) => {
  return layer.name || layer.type.replaceAll("_", "");
};

exports.ChildrenSearchableSelect = ChildrenSearchableSelect;
