import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { X as s } from "lucide-react";
import d from "../../hooks/useStepper.js";
import { Dialog as h, DialogTrigger as u, DialogContent as y, DialogClose as f } from "../../../dialog/DialogPrimitive.js";
import l from "../../../button/Button.js";
import { StepperLayout as x } from "../../components/StepperLayout.js";
import { StepperLayoutHeader as S } from "../../components/StepperLayoutHeader.js";
import g from "../../../app-header/AppHeader.js";
import { StepperLayoutNav as C } from "../../components/StepperLayoutNav.js";
import v from "../../../stepper/components/stepper-step/StepperStep.js";
import { StepperLayoutContent as N } from "../../components/StepperLayoutContent.js";
import { StepperLayoutPanel as p } from "../../components/StepperLayoutPanel.js";
import { StepperLayoutFooter as D } from "../../components/StepperLayoutFooter.js";
import { StepperLayoutBack as b } from "../../components/StepperLayoutBack.js";
import { StepperLayoutNext as L } from "../../components/StepperLayoutNext.js";
import i from "../../../box/Box.js";
import r from "../../../label/Label.js";
import c from "../../../input/Input.js";
import I from "../../../text/Text.js";
const m = [
  { id: "company", title: "Company", description: "Enter company details" },
  { id: "contact", title: "Contact", description: "Enter contact person" },
  { id: "review", title: "Review", description: "Confirm and submit" }
], P = ({ stepper: t }) => {
  const o = t.getStepData("company") ?? { name: "", taxId: "" };
  return /* @__PURE__ */ a(i, { className: "space-y-4 py-2", children: [
    /* @__PURE__ */ a(i, { className: "space-y-1.5", children: [
      /* @__PURE__ */ e(r, { htmlFor: "dex-company-name", children: "Company Name" }),
      /* @__PURE__ */ e(
        c,
        {
          id: "dex-company-name",
          placeholder: "Acme GmbH",
          value: o.name,
          onChange: (n) => t.setStepData("company", { ...o, name: n })
        }
      )
    ] }),
    /* @__PURE__ */ a(i, { className: "space-y-1.5", children: [
      /* @__PURE__ */ e(r, { htmlFor: "dex-company-tax", children: "Tax ID" }),
      /* @__PURE__ */ e(
        c,
        {
          id: "dex-company-tax",
          placeholder: "DE123456789",
          value: o.taxId,
          onChange: (n) => t.setStepData("company", { ...o, taxId: n })
        }
      )
    ] })
  ] });
}, w = ({ stepper: t }) => {
  const o = t.getStepData("contact") ?? { email: "", phone: "" };
  return /* @__PURE__ */ a(i, { className: "space-y-4 py-2", children: [
    /* @__PURE__ */ a(i, { className: "space-y-1.5", children: [
      /* @__PURE__ */ e(r, { htmlFor: "dex-contact-email", children: "Email" }),
      /* @__PURE__ */ e(
        c,
        {
          id: "dex-contact-email",
          type: "email",
          placeholder: "hello@acme.de",
          value: o.email,
          onChange: (n) => t.setStepData("contact", { ...o, email: n })
        }
      )
    ] }),
    /* @__PURE__ */ a(i, { className: "space-y-1.5", children: [
      /* @__PURE__ */ e(r, { htmlFor: "dex-contact-phone", children: "Phone" }),
      /* @__PURE__ */ e(
        c,
        {
          id: "dex-contact-phone",
          placeholder: "+49 000 000",
          value: o.phone,
          onChange: (n) => t.setStepData("contact", { ...o, phone: n })
        }
      )
    ] })
  ] });
}, B = ({ stepper: t }) => {
  const o = t.getAllData();
  return /* @__PURE__ */ a(i, { className: "py-2 space-y-2", children: [
    /* @__PURE__ */ e(I, { type: "muted", children: "Review your details before submitting:" }),
    /* @__PURE__ */ e("pre", { className: "text-xs bg-muted p-3 rounded-md overflow-auto", children: JSON.stringify(o, null, 2) })
  ] });
}, V = () => {
  const t = d(m);
  return (
    // 1. Dialog shell — wraps everything
    /* @__PURE__ */ a(h, { onOpenChange: (o) => !o && t.reset(), children: [
      /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ e(l, { label: "Open Wizard", icon: "Plus" }) }),
      /* @__PURE__ */ e(y, { hasCloseButton: !1, className: "!p-0", children: /* @__PURE__ */ a(x, { stepper: t, variant: "dialog", children: [
        /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(
          g,
          {
            title: "Create Application",
            subtitle: "Fill in all steps to continue.",
            actions: /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e("button", { type: "button", className: "inline-flex items-center justify-center size-8 rounded-md hover:bg-accent transition-colors", children: /* @__PURE__ */ e(s, { className: "size-4 opacity-70" }) }) })
          }
        ) }),
        /* @__PURE__ */ e(C, { children: m.map((o) => /* @__PURE__ */ e(v, { title: o.title }, o.id)) }),
        /* @__PURE__ */ a(N, { children: [
          /* @__PURE__ */ e(p, { stepId: "company", children: /* @__PURE__ */ e(P, { stepper: t }) }),
          /* @__PURE__ */ e(p, { stepId: "contact", children: /* @__PURE__ */ e(w, { stepper: t }) }),
          /* @__PURE__ */ e(p, { stepId: "review", children: /* @__PURE__ */ e(B, { stepper: t }) }),
          /* @__PURE__ */ a(D, { children: [
            /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(l, { label: "Back", variant: "outline", icon: "ChevronLeft", iconPosition: "left", onClick: t.layoutProps.onBack }) }),
            /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
              l,
              {
                label: t.isLast ? "Submit" : "Next",
                icon: t.isLast ? void 0 : "ChevronRight",
                iconPosition: "right",
                onClick: t.layoutProps.onNext
              }
            ) })
          ] })
        ] })
      ] }) })
    ] })
  );
};
export {
  V as DialogExample
};
//# sourceMappingURL=DialogExample.js.map
