"use client";
'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const core_esm = require('../../../../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@dnd-kit/core/dist/core.esm.cjs');
const sortable_esm = require('../../../../../node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0__react@19.2.0/node_modules/@dnd-kit/sortable/dist/sortable.esm.cjs');
const utils = require('../../lib/utils.cjs');
const sortableField = require('./sortable-field.cjs');
const stepTabs = require('./step-tabs.cjs');

function DropZone({ id, isDraggingFromPalette }) {
  const { setNodeRef, isOver } = core_esm.useDroppable({
    id
  });
  if (!isDraggingFromPalette) {
    return null;
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      ref: setNodeRef,
      className: utils.cn(
        "h-2 rounded-full transition-all duration-200",
        isOver ? "h-3 bg-primary animate-pulse" : "bg-muted-foreground/20"
      )
    }
  );
}
function Canvas({
  fields,
  components,
  onEditField,
  onDeleteField,
  onConfigureNested,
  isDraggingFromPalette,
  className,
  steps,
  activeStepIndex,
  onActiveStepChange,
  onAddStep,
  onDeleteStep,
  onRenameStep,
  hideStepControls
}) {
  const { setNodeRef, isOver } = core_esm.useDroppable({
    id: "canvas"
  });
  const getComponent = (type) => components.find((c) => c.type === type);
  const visibleFields = React.useMemo(() => {
    if (steps.length <= 1) {
      return fields;
    }
    return fields.filter((f) => (f.stepGroup ?? 0) === activeStepIndex);
  }, [fields, steps.length, activeStepIndex]);
  const sortableItems = React.useMemo(() => visibleFields.map((f) => f.id), [visibleFields]);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col h-full", className), children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      stepTabs.StepTabs,
      {
        steps,
        activeStepIndex,
        onActiveStepChange,
        onAddStep,
        onDeleteStep,
        onRenameStep,
        hideStepControls
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        ref: setNodeRef,
        "data-testid": "form-builder-canvas",
        className: utils.cn(
          "flex-1 p-4 rounded-lg border-2 border-dashed min-h-[400px] transition-colors",
          isOver && isDraggingFromPalette ? "border-primary bg-primary/5" : "border-muted-foreground/20"
        ),
        children: visibleFields.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full text-muted-foreground", "data-testid": "canvas-drop-zone", children: [
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "Drop components here" }),
          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: steps.length > 1 ? `Drag components from the palette to add to ${steps[activeStepIndex]?.title || "this step"}` : "Drag components from the palette to build your form" })
        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
          sortable_esm.SortableContext,
          {
            items: sortableItems,
            strategy: sortable_esm.verticalListSortingStrategy,
            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
              /* @__PURE__ */ jsxRuntime.jsx(DropZone, { id: "drop-zone-start", isDraggingFromPalette }),
              visibleFields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
                /* @__PURE__ */ jsxRuntime.jsx(
                  sortableField.SortableField,
                  {
                    field,
                    index,
                    component: getComponent(field.type),
                    onEdit: () => onEditField(field.id),
                    onDelete: () => onDeleteField(field.id),
                    onConfigureNested: onConfigureNested ? () => onConfigureNested(field.id) : void 0
                  }
                ),
                /* @__PURE__ */ jsxRuntime.jsx(DropZone, { id: `drop-zone-${field.id}`, isDraggingFromPalette })
              ] }, field.id))
            ] })
          }
        )
      }
    )
  ] });
}

exports.Canvas = Canvas;
