'use strict';

const jsxRuntime = require('react/jsx-runtime');
const form = require('../../../components/form.cjs');
const childrenSearchableSelect = require('../../../components/ui-builder/internal/form-fields/children-searchable-select.cjs');
const iconnameField = require('../../../components/ui-builder/internal/form-fields/iconname-field.cjs');
const textarea = require('../../../components/textarea.cjs');
const minimalTiptap = require('../../../components/minimal-tiptap/minimal-tiptap.cjs');
const tooltip = require('../../../components/tooltip.cjs');
const layerStore = require('../store/layer-store.cjs');
require('react');
const types = require('../../../components/ui-builder/types.cjs');
const LucideIcons = require('lucide-react');
const button = require('../../../components/button.cjs');
const dropdownMenu = require('../../../components/dropdown-menu.cjs');
require('clsx');
require('tailwind-merge');
const editorStore = require('../store/editor-store.cjs');
const card = require('../../../components/card.cjs');
const breakpointClassnameControl = require('../../../components/ui-builder/internal/form-fields/classname-control/breakpoint-classname-control.cjs');
const label = require('../../../components/label.cjs');
const badge = require('../../../components/badge.cjs');

const classNameFieldOverrides = (layer) => {
  return {
    fieldType: ({
      label,
      isRequired,
      field,
      fieldConfigItem
    }) => /* @__PURE__ */ jsxRuntime.jsx(
      FormFieldWrapper,
      {
        label,
        isRequired,
        fieldConfigItem,
        children: /* @__PURE__ */ jsxRuntime.jsx(
          breakpointClassnameControl.BreakpointClassNameControl,
          {
            value: field.value,
            onChange: field.onChange
          }
        )
      }
    )
  };
};
const childrenFieldOverrides = (layer) => {
  return {
    fieldType: ({
      label,
      isRequired,
      fieldConfigItem,
      field,
      fieldProps
    }) => /* @__PURE__ */ jsxRuntime.jsx(
      FormFieldWrapper,
      {
        label,
        isRequired,
        fieldConfigItem,
        children: /* @__PURE__ */ jsxRuntime.jsx(
          childrenSearchableSelect.ChildrenSearchableSelect,
          {
            layer,
            onChange: field.onChange,
            ...fieldProps
          }
        )
      }
    )
  };
};
const iconNameFieldOverrides = (layer) => {
  return {
    fieldType: ({
      label,
      isRequired,
      field,
      fieldProps
    }) => /* @__PURE__ */ jsxRuntime.jsx(
      iconnameField,
      {
        label,
        isRequired,
        value: layer.props.iconName,
        onChange: field.onChange,
        ...fieldProps
      }
    )
  };
};
const childrenAsTextareaFieldOverrides = (layer, allowVariableBinding = false) => {
  return {
    renderParent: allowVariableBinding ? ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ChildrenVariableBindingWrapper, { children }) : void 0,
    fieldType: ({
      label,
      isRequired,
      fieldConfigItem,
      field,
      fieldProps
    }) => /* @__PURE__ */ jsxRuntime.jsx(
      FormFieldWrapper,
      {
        label,
        isRequired,
        fieldConfigItem,
        children: /* @__PURE__ */ jsxRuntime.jsx(
          textarea.Textarea,
          {
            value: typeof layer.children === "string" ? layer.children : "",
            onChange: field.onChange,
            ...fieldProps
          }
        )
      }
    )
  };
};
const childrenAsTipTapFieldOverrides = (layer, allowVariableBinding = false) => {
  return {
    renderParent: allowVariableBinding ? ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ChildrenVariableBindingWrapper, { children }) : void 0,
    fieldType: ({
      label,
      isRequired,
      fieldConfigItem,
      field,
      fieldProps
    }) => /* @__PURE__ */ jsxRuntime.jsx(
      FormFieldWrapper,
      {
        label,
        isRequired,
        fieldConfigItem,
        children: /* @__PURE__ */ jsxRuntime.jsx(
          minimalTiptap.MinimalTiptapEditor,
          {
            immediatelyRender: false,
            output: "markdown",
            editable: true,
            value: typeof layer.children === "string" ? layer.children : "",
            editorClassName: "focus:outline-none px-4 py-2 h-full",
            onChange: (content) => {
              if (typeof content === "string") {
                field.onChange(content);
              } else {
                console.warn("Tiptap content is not a string");
              }
            },
            ...fieldProps
          }
        )
      }
    )
  };
};
const memoizedCommonFieldOverrides = /* @__PURE__ */ new Map();
const commonFieldOverrides = (allowBinding = false) => {
  if (memoizedCommonFieldOverrides.has(allowBinding)) {
    return memoizedCommonFieldOverrides.get(allowBinding);
  }
  const overrides = {
    className: (layer) => classNameFieldOverrides(),
    children: (layer) => childrenFieldOverrides(layer)
  };
  memoizedCommonFieldOverrides.set(allowBinding, overrides);
  return overrides;
};
function FormFieldWrapper({
  label,
  isRequired,
  fieldConfigItem,
  children
}) {
  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { className: "flex flex-col", children: [
    /* @__PURE__ */ jsxRuntime.jsxs(form.FormLabel, { children: [
      label,
      isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive", children: " *" })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children }),
    fieldConfigItem?.description && /* @__PURE__ */ jsxRuntime.jsx(form.FormDescription, { children: fieldConfigItem.description })
  ] });
}
function ChildrenVariableBindingWrapper({
  children
}) {
  const variables = layerStore.useLayerStore((state) => state.variables);
  const selectedLayerId = layerStore.useLayerStore((state) => state.selectedLayerId);
  const findLayerById = layerStore.useLayerStore((state) => state.findLayerById);
  const isChildrenBindingImmutable = layerStore.useLayerStore((state) => state.isChildrenBindingImmutable);
  const incrementRevision = editorStore.useEditorStore((state) => state.incrementRevision);
  const unbindChildrenFromVariable = layerStore.useLayerStore(
    (state) => state.unbindChildrenFromVariable
  );
  const bindChildrenToVariable = layerStore.useLayerStore((state) => state.bindChildrenToVariable);
  const selectedLayer = findLayerById(selectedLayerId);
  if (!selectedLayer) {
    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
  }
  const currentValue = selectedLayer.children;
  const isCurrentlyBound = types.isVariableReference(currentValue);
  const boundVariable = isCurrentlyBound ? variables.find((v) => v.id === currentValue.__variableRef) : null;
  const isImmutable = isChildrenBindingImmutable(selectedLayer.id);
  const handleBindToVariable = (variableId) => {
    bindChildrenToVariable(selectedLayer.id, variableId);
    incrementRevision();
  };
  const handleUnbind = () => {
    unbindChildrenFromVariable(selectedLayer.id);
    incrementRevision();
  };
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full gap-2 items-end", children: isCurrentlyBound && boundVariable ? (
    // Bound state - show variable info and unbind button
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 w-full", children: [
      /* @__PURE__ */ jsxRuntime.jsx(label.Label, { children: "Children" }),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2 w-full", children: [
        /* @__PURE__ */ jsxRuntime.jsx(card.Card, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(card.CardContent, { className: "py-1 px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "h-4 w-4 flex-shrink-0" }),
          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: boundVariable.name }),
              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1.5 py-0.5 bg-muted rounded text-xs font-mono", children: boundVariable.type }),
              isImmutable && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { "data-testid": "immutable-children-badge", className: "rounded", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.LockKeyhole, { strokeWidth: 3, className: "w-3 h-3" }) })
            ] }),
            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground truncate", children: String(boundVariable.defaultValue) })
          ] })
        ] }) }) }),
        !isImmutable && /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
            button.Button,
            {
              variant: "outline",
              onClick: handleUnbind,
              className: "px-3 h-10",
              children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Unlink, { className: "h-4 w-4" })
            }
          ) }),
          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Unbind Variable" })
        ] })
      ] })
    ] })
  ) : (
    // Unbound state - show normal field with bind button
    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
        /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", className: "px-3 h-10", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "h-4 w-4 my-1" }) }) }) }),
          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Bind Children to Variable" })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56", children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground border-b", children: "Bind Children to Variable" }),
          variables.filter((v) => v.type === "string").length > 0 ? variables.filter((v) => v.type === "string").map((variable) => /* @__PURE__ */ jsxRuntime.jsx(
            dropdownMenu.DropdownMenuItem,
            {
              onClick: () => handleBindToVariable(variable.id),
              className: "flex flex-col items-start p-3",
              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "h-4 w-4 flex-shrink-0" }),
                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 ", children: [
                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: variable.name }),
                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1.5 py-0.5 bg-muted rounded text-xs font-mono", children: variable.type })
                  ] }),
                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground truncate", children: String(variable.defaultValue) })
                ] })
              ] })
            },
            variable.id
          )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: "No string variables defined" })
        ] })
      ] }) })
    ] })
  ) });
}

exports.ChildrenVariableBindingWrapper = ChildrenVariableBindingWrapper;
exports.FormFieldWrapper = FormFieldWrapper;
exports.childrenAsTextareaFieldOverrides = childrenAsTextareaFieldOverrides;
exports.childrenAsTipTapFieldOverrides = childrenAsTipTapFieldOverrides;
exports.childrenFieldOverrides = childrenFieldOverrides;
exports.classNameFieldOverrides = classNameFieldOverrides;
exports.commonFieldOverrides = commonFieldOverrides;
exports.iconNameFieldOverrides = iconNameFieldOverrides;
