import { jsx as e, jsxs as o } from "react/jsx-runtime";
import R from "react";
import D from "../../../form/hooks/useZodForm.js";
import F from "../../../form/Form.js";
import l from "../../../box/Box.js";
import m from "../../Field.js";
import c from "../../components/field-label/FieldLabel.js";
import i from "../../components/field-control/FieldControl.js";
import P from "../../../simple-input/SimpleInput.js";
import p from "../../components/field-description/FieldDescription.js";
import T from "../../../input-group/InputGroup.js";
import f from "../../../input-group/components/input-group-addon/InputGroupAddon.js";
import B from "../../../input-group/components/input-group-icon/InputGroupIcon.js";
import A from "../../../input-group/components/input-group-input/InputGroupInput.js";
import q from "../../../input-otp/InputOTP.js";
import E from "../../../select/Select.js";
import { Skeleton as b } from "../../../skeleton/SkeletonPrimitive.js";
import x from "../../../label/Label.js";
import G from "../../../checkbox/components/checkbox-group/CheckboxGroup.js";
import k from "../../../checkbox/Checkbox.js";
import v from "../../../error-message/ErrorMessage.js";
import O from "../../../radio/Radio.js";
import j from "../../../date-picker/DatePicker.js";
import M from "../../../date-range-picker/DateRangePicker.js";
import U from "../../../switch/Switch.js";
import Z from "../../../link/Link.js";
import W from "../../../text/Text.js";
import Y from "../../../button/Button.js";
import { o as w, b as N, s as u, d as y, a as _, Z as C } from "../../../../types-Brp6Qwfh.js";
const z = w({
  /** Standard text input */
  email: u().email({ message: "Please enter a valid email address" }),
  /** InputGroup — prefix icon + text input */
  username: u().min(3, { message: "Username must be at least 3 characters" }),
  /** InputOTP — 6-digit one-time password */
  otp: u().length(6, { message: "OTP must be exactly 6 digits" }),
  /** Checkbox — single boolean toggle */
  termsAccepted: N().refine((n) => n === !0, { message: "You must accept the terms" }),
  /** CheckboxGroup — multi-select array of strings */
  interests: _(u().nullable()).min(1, { message: "Select at least one interest" }),
  /**
   * DatePicker — typed as optional so undefined is a valid default value.
   * Required-on-submit validation is handled via superRefine below to avoid
   * Zod narrowing the output type to Date (which would break defaultValues).
   */
  birthDay: y().optional(),
  /** DateRangePicker — { from: Date, to?: Date } */
  bookingRange: w({ from: y(), to: y().optional() }).optional(),
  /** Radio — single string value from a radio group */
  gender: u().min(1, { message: "Please select a gender" }),
  /** Select — single string value from a dropdown */
  country: u().min(1, { message: "Please select a country" }),
  /** Switch — boolean toggle */
  newsletter: N().refine((n) => n === !0, { message: "You must accept the newsletter" })
}).superRefine((n, g) => {
  var d, a;
  n.birthDay || g.addIssue({ code: C.custom, message: "Please select your birth date", path: ["birthDay"] }), (!((d = n.bookingRange) != null && d.from) || !((a = n.bookingRange) != null && a.to)) && g.addIssue({ code: C.custom, message: "Please select your booking range", path: ["bookingRange"] });
}), I = [
  { value: "technology", label: "Technology" },
  { value: "design", label: "Design" },
  { value: "marketing", label: "Marketing" }
], J = [
  { value: "de", label: "Germany" },
  { value: "at", label: "Austria" },
  { value: "ch", label: "Switzerland" },
  { value: "us", label: "United States" }
], we = ({ isLoading: n = !1 }) => {
  const g = D({
    schema: z,
    defaultValues: {
      email: "",
      username: "",
      otp: "",
      termsAccepted: !1,
      interests: [],
      birthDay: void 0,
      bookingRange: void 0,
      gender: "",
      country: "",
      newsletter: !1
    }
  }), d = R.useCallback((a) => {
    alert(JSON.stringify(a, null, 2));
  }, []);
  return /* @__PURE__ */ e(F, { form: g, onSubmit: d, children: /* @__PURE__ */ o(l, { className: "flex gap-[var(--spacing-6)]", children: [
    /* @__PURE__ */ o(l, { className: "flex flex-col gap-[var(--spacing-6)]", children: [
      /* @__PURE__ */ o(m, { name: "email", isLoading: n, children: [
        /* @__PURE__ */ e(c, { required: !0, children: "Email Address" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(P, { type: "email", placeholder: "you@example.com" }) }),
        /* @__PURE__ */ e(p, { children: "We'll never share your email" })
      ] }),
      /* @__PURE__ */ o(m, { name: "username", isLoading: n, children: [
        /* @__PURE__ */ e(c, { required: !0, children: "Username" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ o(T, { children: [
          /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(B, { name: "AtSign" }) }),
          /* @__PURE__ */ e(A, { placeholder: "your-handle" })
        ] }) }),
        /* @__PURE__ */ e(p, { children: "At least 3 characters" })
      ] }),
      /* @__PURE__ */ o(m, { name: "otp", isLoading: n, children: [
        /* @__PURE__ */ e(c, { required: !0, children: "One-Time Password" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(q, { maxLength: 6, groupLength: 3, separator: !0 }) }),
        /* @__PURE__ */ e(p, { children: "Enter the 6-digit code from your authenticator app" })
      ] }),
      /* @__PURE__ */ o(m, { name: "country", isLoading: n, children: [
        /* @__PURE__ */ e(c, { required: !0, children: "Country" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(E, { placeholder: "Select your country", options: J }) })
      ] }),
      /* @__PURE__ */ e(
        m,
        {
          name: "interests",
          isLoading: n,
          render: ({ field: a, fieldState: r, isLoading: h }) => {
            var t;
            return /* @__PURE__ */ o(l, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
              /* @__PURE__ */ e(c, { required: !0, isError: !!(r != null && r.error), children: "Interests" }),
              h ? /* @__PURE__ */ e(l, { className: "flex flex-col gap-[var(--spacing-2)]", children: I.map((s) => /* @__PURE__ */ o(l, { className: "flex flex-row items-center gap-[var(--spacing-2)]", children: [
                /* @__PURE__ */ e(b, { className: "h-[var(--height-h-4)] w-[var(--width-w-4)] shrink-0 rounded-[var(--border-radius-sm)]" }),
                /* @__PURE__ */ e(x, { variant: "subtitle", children: s.label })
              ] }, s.value)) }) : /* @__PURE__ */ e(G, { value: a == null ? void 0 : a.value, onChange: (s) => a == null ? void 0 : a.onChange(s), children: I.map((s) => /* @__PURE__ */ o(l, { className: "flex flex-row items-center gap-[var(--spacing-2)]", children: [
                /* @__PURE__ */ e(k, { value: s.value, id: s.value }),
                /* @__PURE__ */ e(x, { variant: "subtitle", htmlFor: s.value, children: s.label })
              ] }, s.value)) }),
              /* @__PURE__ */ e(p, { children: "Select all that apply" }),
              ((t = r == null ? void 0 : r.error) == null ? void 0 : t.message) && /* @__PURE__ */ e(v, { message: r.error.message })
            ] });
          }
        }
      )
    ] }),
    /* @__PURE__ */ o(l, { className: "flex flex-col gap-[var(--spacing-6)]", children: [
      /* @__PURE__ */ o(m, { name: "gender", isLoading: n, children: [
        /* @__PURE__ */ e(c, { required: !0, children: "Gender" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
          O,
          {
            options: [
              { value: "male", label: "Male" },
              { value: "female", label: "Female" },
              { value: "other", label: "Other" }
            ]
          }
        ) })
      ] }),
      /* @__PURE__ */ o(m, { name: "birthDay", isLoading: n, children: [
        /* @__PURE__ */ e(c, { htmlFor: "birthDay", required: !0, children: "Date of Birth" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(j, { id: "birthDay" }) })
      ] }),
      /* @__PURE__ */ o(m, { name: "bookingRange", isLoading: n, children: [
        /* @__PURE__ */ e(c, { htmlFor: "bookingRange", children: "Booking Period" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(M, { id: "bookingRange" }) }),
        /* @__PURE__ */ e(p, { children: "Select your check-in and check-out dates" })
      ] }),
      /* @__PURE__ */ e(
        m,
        {
          name: "newsletter",
          isLoading: n,
          render: ({ field: a, fieldState: r, isLoading: h }) => {
            var t;
            return /* @__PURE__ */ o(l, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
              /* @__PURE__ */ o(l, { className: "flex flex-row items-center justify-between gap-[var(--spacing-4)]", children: [
                /* @__PURE__ */ o(l, { className: "flex flex-col gap-[var(--spacing-1)]", children: [
                  /* @__PURE__ */ e(c, { isError: !!(r != null && r.error), children: "Newsletter" }),
                  /* @__PURE__ */ e(p, { children: "Receive weekly product updates and tips" })
                ] }),
                h ? /* @__PURE__ */ e(b, { className: "h-[var(--spacing-6)] w-[var(--spacing-10)] rounded-full" }) : /* @__PURE__ */ e(U, { value: a == null ? void 0 : a.value, onChange: (s) => a == null ? void 0 : a.onChange(s) })
              ] }),
              ((t = r == null ? void 0 : r.error) == null ? void 0 : t.message) && /* @__PURE__ */ e(v, { message: r.error.message })
            ] });
          }
        }
      ),
      /* @__PURE__ */ e(
        m,
        {
          name: "termsAccepted",
          isLoading: n,
          render: ({ field: a, fieldState: r, isLoading: h }) => {
            var t;
            return /* @__PURE__ */ o(l, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
              /* @__PURE__ */ o(l, { className: "flex flex-row items-center gap-[var(--spacing-3)]", children: [
                h ? /* @__PURE__ */ e(b, { className: "h-[var(--spacing-5)] w-[var(--spacing-5)] rounded-[var(--border-radius-sm)]" }) : /* @__PURE__ */ e(
                  k,
                  {
                    id: "terms",
                    value: !!(a != null && a.value),
                    onChange: (s) => a == null ? void 0 : a.onChange(!!s),
                    isError: !!(r != null && r.error)
                  }
                ),
                /* @__PURE__ */ o(c, { htmlFor: "terms", isError: !!(r != null && r.error), children: [
                  "I accept the",
                  " ",
                  /* @__PURE__ */ e(Z, { url: "#", children: /* @__PURE__ */ e(W, { as: "span", type: "muted", children: "Terms and Conditions" }) })
                ] })
              ] }),
              ((t = r == null ? void 0 : r.error) == null ? void 0 : t.message) && /* @__PURE__ */ e(v, { message: r.error.message })
            ] });
          }
        }
      ),
      /* @__PURE__ */ e(Y, { type: "submit", label: "Submit" })
    ] })
  ] }) });
};
export {
  we as default
};
//# sourceMappingURL=AllControlsWrapper.js.map
