import { jsx as e, jsxs as r } from "react/jsx-runtime";
import { forwardRef as f, useImperativeHandle as S, useCallback as h, useRef as g, useMemo as A, useState as J, useEffect as W } from "react";
import _ from "../../StepperLayout.js";
import v from "../../../form/hooks/useZodForm.js";
import y from "../../../form/Form.js";
import l from "../../../field/Field.js";
import s from "../../../field/components/field-control/FieldControl.js";
import G from "../../../radio/Radio.js";
import d from "../../../box/Box.js";
import m from "../../../field/components/field-label/FieldLabel.js";
import u from "../../../input/Input.js";
import T from "../../../select/Select.js";
import M from "../../../field/components/field-description/FieldDescription.js";
import R from "../../../checkbox/Checkbox.js";
import U from "../../../alert/Alert.js";
import Y from "../../hooks/useStepperLayoutState.js";
import Z from "../../../button/Button.js";
import L from "../../../icon/Icon.js";
import K from "../../../text/Text.js";
import { o as b, s as p, b as B } from "../../../../types-Brp6Qwfh.js";
const Q = [
  {
    title: "Welcome",
    contentHeader: {
      title: "Welcome!",
      subtitle: "How would you like to get started?",
      icon: { icon: "Plus", variant: "info", size: "lg" }
    }
  },
  {
    title: "Company Data",
    contentHeader: {
      title: "Welcome to JTL ERP Cloud",
      subtitle: "Please enter your company data to get started.",
      icon: { icon: "Building2", variant: "info", size: "lg" }
    }
  },
  {
    title: "Shipping",
    contentHeader: {
      title: "Shipping",
      subtitle: "Configure your shipping settings for a smooth workflow.",
      icon: { icon: "Package", variant: "info", size: "lg" }
    }
  },
  {
    title: "Online Shop",
    contentHeader: {
      title: "Online Shop",
      subtitle: "Connect your online shop with the ERP.",
      icon: { icon: "ShoppingBag", variant: "info", size: "lg" }
    }
  },
  {
    title: "Setup",
    completedTitle: "Complete",
    contentHeader: {
      title: "Setup in progress...",
      subtitle: "Please wait while your system is being configured.",
      icon: { icon: "Check", variant: "success", size: "lg" }
    }
  }
], X = [
  { value: "new", label: "Start with a new instance", description: "Set up a new JTL ERP Cloud instance from scratch." },
  { value: "import", label: "Import existing data", description: "Import data from an existing system. (Coming soon)" }
], $ = [
  { value: "de", label: "Germany" },
  { value: "at", label: "Austria" },
  { value: "ch", label: "Switzerland" }
], ee = [
  { value: "dhl", label: "DHL" },
  { value: "dpd", label: "DPD" },
  { value: "ups", label: "UPS" },
  { value: "hermes", label: "Hermes" }
], te = [
  { value: "jtl-shop", label: "JTL-Shop" },
  { value: "shopify", label: "Shopify" },
  { value: "woocommerce", label: "WooCommerce" }
], ne = b({
  instanceType: p().min(1, "Please select an option to continue.")
}), D = f((i, n) => {
  const t = v({ schema: ne, defaultValues: { instanceType: "" } });
  S(n, () => ({
    validate: () => t.trigger()
  }));
  const a = h(
    (o) => {
      t.setValue("instanceType", String(o), { shouldValidate: !0 });
    },
    [t]
  );
  return /* @__PURE__ */ e(y, { form: t, onSubmit: () => {
  }, noValidate: !0, children: /* @__PURE__ */ e(l, { name: "instanceType", children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(G, { options: X, value: t.watch("instanceType"), onChange: a, hasBorder: !0 }) }) }) });
});
D.displayName = "WelcomeStep";
const ae = b({
  firstName: p().min(1, "First name is required"),
  lastName: p().min(1, "Last name is required"),
  companyName: p().min(1, "Company name is required"),
  address: p().min(1, "Address is required"),
  country: p().min(1, "Country is required"),
  taxId: p().min(1, "Tax ID is required"),
  phone: p().min(1, "Phone number is required")
}), H = f((i, n) => {
  const t = v({
    schema: ae,
    defaultValues: { firstName: "", lastName: "", companyName: "", address: "", country: "", taxId: "", phone: "" }
  });
  S(n, () => ({
    validate: () => t.trigger()
  }));
  const a = h(
    (o) => {
      t.setValue("country", o, { shouldValidate: !0 });
    },
    [t]
  );
  return /* @__PURE__ */ e(y, { form: t, onSubmit: () => {
  }, noValidate: !0, children: /* @__PURE__ */ r(d, { className: "flex flex-col gap-[var(--spacing-6)]", children: [
    /* @__PURE__ */ r(l, { name: "firstName", children: [
      /* @__PURE__ */ e(m, { required: !0, children: "First Name" }),
      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(u, { placeholder: "Sebastian" }) })
    ] }),
    /* @__PURE__ */ r(l, { name: "lastName", children: [
      /* @__PURE__ */ e(m, { required: !0, children: "Last Name" }),
      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(u, { placeholder: "Evers" }) })
    ] }),
    /* @__PURE__ */ r(l, { name: "companyName", children: [
      /* @__PURE__ */ e(m, { required: !0, children: "Company Name" }),
      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(u, { placeholder: "Tassen-Tycoon Evers" }) })
    ] }),
    /* @__PURE__ */ r(l, { name: "address", children: [
      /* @__PURE__ */ e(m, { required: !0, children: "Address" }),
      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(u, { placeholder: "Rheinstr. 3, 33602 Bielefeld" }) })
    ] }),
    /* @__PURE__ */ r(l, { name: "country", children: [
      /* @__PURE__ */ e(m, { required: !0, children: "Country" }),
      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(T, { options: $, placeholder: "Select a country", onChange: a, value: t.watch("country") }) })
    ] }),
    /* @__PURE__ */ r(l, { name: "taxId", children: [
      /* @__PURE__ */ e(m, { required: !0, children: "Tax ID" }),
      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(u, { placeholder: "DE123456789" }) })
    ] }),
    /* @__PURE__ */ r(l, { name: "phone", children: [
      /* @__PURE__ */ e(m, { required: !0, children: "Phone Number" }),
      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(u, { placeholder: "+49 521 123456" }) })
    ] })
  ] }) });
});
H.displayName = "CompanyDataStep";
const re = b({
  shippingProvider: p().optional(),
  acceptShippingTerms: B().refine((i) => i, { message: "You must accept the shipping terms to continue." })
}), F = f((i, n) => {
  const t = v({
    schema: re,
    defaultValues: { shippingProvider: "dhl", acceptShippingTerms: !1 }
  });
  S(n, () => ({
    validate: () => t.trigger()
  }));
  const a = h(
    (c) => {
      t.setValue("acceptShippingTerms", c, { shouldValidate: !0 });
    },
    [t]
  ), o = h(
    (c) => {
      t.setValue("shippingProvider", c);
    },
    [t]
  );
  return /* @__PURE__ */ e(y, { form: t, onSubmit: () => {
  }, noValidate: !0, children: /* @__PURE__ */ r(d, { className: "flex flex-col gap-[var(--spacing-6)]", children: [
    /* @__PURE__ */ r(l, { name: "shippingProvider", children: [
      /* @__PURE__ */ e(m, { children: "Shipping Provider" }),
      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(T, { options: ee, placeholder: "DHL", defaultValue: "dhl", onChange: o }) }),
      /* @__PURE__ */ e(M, { children: "More shipping providers coming soon." })
    ] }),
    /* @__PURE__ */ e(l, { name: "acceptShippingTerms", children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(R, { value: t.watch("acceptShippingTerms"), onChange: a, children: "I accept the JTL Shipping Terms and confirm that I have read and understood them." }) }) })
  ] }) });
});
F.displayName = "ShippingStep";
const ie = b({
  salesChannel: p().optional(),
  shopName: p().min(1, "Shop name is required"),
  acceptShopTerms: B().refine((i) => i, { message: "You must accept the shop terms to continue." })
}), j = f((i, n) => {
  const t = v({
    schema: ie,
    defaultValues: { salesChannel: "jtl-shop", shopName: "", acceptShopTerms: !1 }
  });
  S(n, () => ({
    validate: () => t.trigger()
  }));
  const a = h(
    (c) => {
      t.setValue("acceptShopTerms", c, { shouldValidate: !0 });
    },
    [t]
  ), o = h(
    (c) => {
      t.setValue("salesChannel", c);
    },
    [t]
  );
  return /* @__PURE__ */ e(y, { form: t, onSubmit: () => {
  }, noValidate: !0, children: /* @__PURE__ */ r(d, { className: "flex flex-col gap-[var(--spacing-6)]", children: [
    /* @__PURE__ */ r(l, { name: "salesChannel", children: [
      /* @__PURE__ */ e(m, { required: !0, children: "Sales Channel" }),
      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(T, { options: te, placeholder: "JTL-Shop", defaultValue: "jtl-shop", onChange: o }) })
    ] }),
    /* @__PURE__ */ r(l, { name: "shopName", children: [
      /* @__PURE__ */ e(m, { required: !0, children: "Shop Name" }),
      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(u, { placeholder: "Tassen Tycoon" }) })
    ] }),
    /* @__PURE__ */ e(
      U,
      {
        variant: "warning",
        title: "Notice",
        description: "JTL-Software-GmbH is not responsible for products or services sold through the connected online shop. As the shop operator, you are responsible for compliance with all legal requirements, such as a complete imprint or cancellation form.",
        closable: !1
      }
    ),
    /* @__PURE__ */ e(l, { name: "acceptShopTerms", children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(R, { value: t.watch("acceptShopTerms"), onChange: a, children: "I accept the JTL Shop Terms of Use and confirm that I have read and understood them." }) }) })
  ] }) });
});
j.displayName = "OnlineShopStep";
const k = ["Setting up shipping...", "Setting up online shop...", "Setting up inventory management...", "Finalizing setup..."], z = () => {
  const [i, n] = J(0);
  return W(() => {
    if (i >= k.length) return;
    const t = setTimeout(() => {
      n((a) => a + 1);
    }, 1200);
    return () => clearTimeout(t);
  }, [i]), /* @__PURE__ */ e(d, { className: "flex flex-col gap-[var(--spacing-6)]", children: /* @__PURE__ */ e(d, { className: "w-full flex justify-center", children: /* @__PURE__ */ e(d, { className: "flex flex-col gap-[var(--spacing-4)] items-start py-[var(--spacing-6)]", children: k.map((t, a) => {
    const o = a < i, c = a === i;
    return /* @__PURE__ */ r(d, { className: "flex items-center gap-[var(--spacing-3)]", children: [
      o ? /* @__PURE__ */ e(d, { className: "flex items-center justify-center w-[var(--spacing-8)] h-[var(--spacing-8)] rounded-full bg-[var(--base-success-background)] text-[var(--base-success-text)]", children: /* @__PURE__ */ e(L, { name: "Check", size: 16 }) }) : /* @__PURE__ */ e(d, { className: "flex items-center justify-center w-[var(--spacing-8)] h-[var(--spacing-8)] rounded-full border border-[var(--base-border)]", children: c ? /* @__PURE__ */ e(L, { name: "Loader2", size: 16, animation: "spin" }) : /* @__PURE__ */ e(d, { className: "w-[var(--spacing-2)] h-[var(--spacing-2)] rounded-full bg-[var(--base-muted-foreground)]" }) }),
      /* @__PURE__ */ e(K, { type: o ? "muted" : void 0, weight: c ? "semibold" : "regular", children: t })
    ] }, t);
  }) }) }) });
};
z.displayName = "SetupStep";
const Pe = () => {
  const { steps: i, activeStep: n, goNext: t, goBack: a, setStepStatus: o, reset: c } = Y(Q), N = g(null), x = g(null), w = g(null), V = g(null), P = A(() => [N, x, w, V, null], []), E = h(
    async (C) => {
      var I;
      const q = P[C];
      if (!(q ? await ((I = q.current) == null ? void 0 : I.validate()) ?? !0 : !0)) {
        o(C, "error");
        return;
      }
      o(C, "completed"), t();
    },
    [P, o, t]
  ), O = h(() => {
    a();
  }, [a]);
  return /* @__PURE__ */ r(
    _,
    {
      steps: i,
      activeStep: n,
      onNext: E,
      onBack: O,
      backButton: { label: "Back", icon: "ChevronLeft" },
      nextButton: { label: "Next", icon: "ChevronRight", iconPosition: "right" },
      secondaryActions: /* @__PURE__ */ e(Z, { label: "Cancel", variant: "ghost", onClick: c }),
      children: [
        n === 0 && /* @__PURE__ */ e(D, { ref: N }),
        n === 1 && /* @__PURE__ */ e(H, { ref: x }),
        n === 2 && /* @__PURE__ */ e(F, { ref: w }),
        n === 3 && /* @__PURE__ */ e(j, { ref: V }),
        n === 4 && /* @__PURE__ */ e(z, {})
      ]
    }
  );
};
export {
  Pe as default
};
//# sourceMappingURL=FormExample.js.map
