import { jsxs as d, jsx as a } from "react/jsx-runtime";
import { useMemo as c, useCallback as s } from "react";
import n from "../box/Box.js";
import L from "../stepper/Stepper.js";
import j from "../stepper/components/stepper-step/StepperStep.js";
import { Card as A, CardHeader as M, CardContent as F, CardFooter as I } from "../card/CardPrimitive.js";
import T from "../app-header/AppHeader.js";
import h from "../button/Button.js";
const z = ({ steps: t, activeStep: l, onNext: m, onBack: p, backButton: g, nextButton: x, secondaryActions: S, children: v }) => {
  const o = Math.max(0, Math.min(l, t.length - 1)), k = c(() => t.map((e, r) => e.status === "error" ? r : -1).filter((e) => e >= 0), [t]), y = c(() => t.map((e, r) => e.status === "warning" ? r : -1).filter((e) => e >= 0), [t]), C = c(() => t.map((e, r) => e.status === "completed" ? r : -1).filter((e) => e >= 0), [t]), B = o === 0, N = o === t.length - 1, b = s(
    (e, r) => e ?? r,
    []
  ), u = b(t[o].backAction, B ? "hidden" : "visible"), f = b(t[o].nextAction, N ? "hidden" : "visible"), w = s(async () => {
    try {
      await m(l);
    } catch {
    }
  }, [m, l]), H = s(() => {
    p(l);
  }, [p, l]);
  if (t.length === 0) return null;
  const i = t[o];
  return /* @__PURE__ */ d(n, { className: "flex flex-col h-full gap-[var(--spacing-6)]", children: [
    /* @__PURE__ */ a(n, { className: "px-[var(--spacing-6)] py-[var(--spacing-4)] bg-[var(--base-background)] border border-[var(--base-border)] rounded-[var(--border-radius-default)]", children: /* @__PURE__ */ a(
      L,
      {
        type: "horizontal",
        activeSteps: o,
        completedSteps: C,
        errorSteps: k,
        warningSteps: y,
        mode: "display",
        children: t.map((e, r) => /* @__PURE__ */ a(
          j,
          {
            title: e.title,
            description: e.description,
            completedTitle: e.completedTitle,
            completedBadgeLabel: e.completedBadgeLabel,
            completedBadgeIcon: e.completedBadgeIcon
          },
          r
        ))
      }
    ) }),
    /* @__PURE__ */ a(n, { className: "flex flex-col bg-[var(--base-background)]", children: /* @__PURE__ */ d(A, { className: "w-full", children: [
      i.contentHeader && /* @__PURE__ */ a(M, { children: /* @__PURE__ */ a(
        T,
        {
          title: i.contentHeader.title,
          subtitle: i.contentHeader.subtitle,
          icon: i.contentHeader.icon
        }
      ) }),
      /* @__PURE__ */ a(F, { children: v }),
      /* @__PURE__ */ a(I, { children: /* @__PURE__ */ d(n, { className: "flex w-full gap-[var(--spacing-2)] justify-between", children: [
        /* @__PURE__ */ a(n, { children: u !== "hidden" && /* @__PURE__ */ a(
          h,
          {
            label: "Zurück",
            icon: "ChevronLeft",
            iconPosition: "left",
            variant: "outline",
            disabled: u === "disabled",
            "data-testid": "back-button",
            onClick: H,
            ...g
          }
        ) }),
        /* @__PURE__ */ d(n, { className: "flex gap-2", children: [
          /* @__PURE__ */ a(n, { children: S }),
          f !== "hidden" && /* @__PURE__ */ a(h, { label: "Weiter", disabled: f === "disabled", "data-testid": "next-button", onClick: w, ...x })
        ] })
      ] }) })
    ] }) })
  ] });
};
z.displayName = "StepperLayout";
export {
  z as default
};
//# sourceMappingURL=StepperLayout.js.map
