import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { useEffect as P, useCallback as u } from "react";
import q from "../../Form.js";
import C from "../../hooks/useZodForm.js";
import t from "../../../box/Box.js";
import F from "../../../text/Text.js";
import d from "../../../form-group/FormGroup.js";
import l from "../../../field/Field.js";
import n from "../../../field/components/field-label/FieldLabel.js";
import s from "../../../field/components/field-control/FieldControl.js";
import o from "../../../simple-input/SimpleInput.js";
import V from "../../../field-array/FieldArray.js";
import k from "../../../select/Select.js";
import c from "../../../button/Button.js";
import { o as h, s as i, a as j, e as I } from "../../../../types-Brp6Qwfh.js";
const T = h({
  firstName: i().min(1, "First name is required"),
  lastName: i().min(1, "Last name is required"),
  email: i().email("Please enter a valid email"),
  phoneNumbers: j(
    h({
      type: I(["mobile", "home", "work"]),
      number: i().min(1, "Phone number is required")
    })
  ).min(1),
  street: i().min(1, "Street is required"),
  city: i().min(1, "City is required"),
  state: i().min(1, "State is required"),
  zipCode: i().min(1, "ZIP code is required"),
  username: i().min(3, "Username must be at least 3 characters"),
  password: i().min(8, "Password must be at least 8 characters"),
  confirmPassword: i()
}).refine((r) => r.password === r.confirmPassword, {
  message: "Passwords do not match",
  path: ["confirmPassword"]
}), L = [
  { value: "mobile", label: "Mobile" },
  { value: "home", label: "Home" },
  { value: "work", label: "Work" }
], K = () => {
  const r = C({
    schema: T,
    defaultValues: {
      firstName: "",
      lastName: "",
      email: "",
      phoneNumbers: [{ type: "mobile", number: "" }],
      street: "",
      city: "",
      state: "",
      zipCode: "",
      username: "",
      password: "",
      confirmPassword: ""
    }
  }), b = r.watch("password");
  P(() => {
    r.getValues("confirmPassword") && r.trigger("confirmPassword");
  }, [b, r]);
  const f = r.watch("firstName"), g = r.watch("email"), w = u(() => {
    r.setValue("firstName", "John"), r.setValue("lastName", "Doe"), r.setValue("email", "john.doe@example.com"), r.setValue("phoneNumbers", [{ type: "mobile", number: "+1 555-0100" }]), r.setValue("street", "123 Main St"), r.setValue("city", "Springfield"), r.setValue("state", "IL"), r.setValue("zipCode", "62701"), r.setValue("username", "johndoe"), r.setValue("password", "Password123!"), r.setValue("confirmPassword", "Password123!");
  }, [r]), y = u(() => {
    r.reset();
  }, [r]), S = u((m) => {
    console.log(m), alert("Form submitted successfully!");
  }, []);
  return /* @__PURE__ */ a(q, { form: r, onSubmit: S, children: [
    /* @__PURE__ */ e(t, { className: "mb-[var(--spacing-4)] p-[var(--spacing-3)] rounded-[var(--border-radius-md)] bg-[var(--base-muted)] border border-solid border-[var(--base-border)]", children: /* @__PURE__ */ a(F, { type: "small", children: [
      "First Name: ",
      /* @__PURE__ */ e("strong", { children: f || "—" }),
      " | Email: ",
      /* @__PURE__ */ e("strong", { children: g || "—" })
    ] }) }),
    /* @__PURE__ */ a(t, { className: "flex flex-col gap-[var(--spacing-6)]", children: [
      /* @__PURE__ */ a(d, { label: "Personal Information", columns: { xs: 4, lg: 12 }, children: [
        /* @__PURE__ */ a(l, { name: "firstName", columnSpan: { xs: 4, lg: 6 }, children: [
          /* @__PURE__ */ e(n, { required: !0, children: "First Name" }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(o, { placeholder: "John" }) })
        ] }),
        /* @__PURE__ */ a(l, { name: "lastName", columnSpan: { xs: 4, lg: 6 }, children: [
          /* @__PURE__ */ e(n, { required: !0, children: "Last Name" }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(o, { placeholder: "Doe" }) })
        ] }),
        /* @__PURE__ */ a(l, { name: "email", columnSpan: { xs: 4, lg: 12 }, children: [
          /* @__PURE__ */ e(n, { required: !0, children: "Email" }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(o, { type: "email", placeholder: "john@example.com" }) })
        ] })
      ] }),
      /* @__PURE__ */ e(d, { label: "Contact Information", columns: 1, children: /* @__PURE__ */ e(V, { name: "phoneNumbers", min: 1, max: 3, children: ({ fields: m, append: x, remove: N }) => /* @__PURE__ */ a(t, { className: "flex flex-col gap-[var(--spacing-3)]", children: [
        m.map((v, p) => /* @__PURE__ */ a(t, { className: "flex items-end gap-[var(--spacing-3)]", children: [
          /* @__PURE__ */ a(l, { name: `phoneNumbers.${p}.type`, columnSpan: { xs: 4, lg: 4 }, children: [
            /* @__PURE__ */ e(n, { children: "Type" }),
            /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(k, { options: L, placeholder: "Select type" }) })
          ] }),
          /* @__PURE__ */ a(l, { name: `phoneNumbers.${p}.number`, columnSpan: { xs: 4, lg: 6 }, children: [
            /* @__PURE__ */ e(n, { children: "Number" }),
            /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(o, { type: "tel", placeholder: "+1 555-0100" }) })
          ] }),
          /* @__PURE__ */ e(t, { className: "pb-[var(--spacing-1)]", children: /* @__PURE__ */ e(c, { variant: "ghost", label: "Remove", type: "button", disabled: m.length <= 1, onClick: () => N(p) }) })
        ] }, v.id)),
        /* @__PURE__ */ e(
          c,
          {
            variant: "outline",
            label: "+ Add Phone",
            type: "button",
            disabled: m.length >= 3,
            onClick: () => x({ type: "mobile", number: "" })
          }
        )
      ] }) }) }),
      /* @__PURE__ */ a(d, { label: "Address", columns: { xs: 4, lg: 12 }, children: [
        /* @__PURE__ */ a(l, { name: "street", columnSpan: { xs: 4, lg: 12 }, children: [
          /* @__PURE__ */ e(n, { required: !0, children: "Street" }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(o, { placeholder: "123 Main St" }) })
        ] }),
        /* @__PURE__ */ a(l, { name: "city", columnSpan: { xs: 4, lg: 6 }, children: [
          /* @__PURE__ */ e(n, { required: !0, children: "City" }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(o, { placeholder: "Springfield" }) })
        ] }),
        /* @__PURE__ */ a(l, { name: "state", columnSpan: { xs: 2, lg: 3 }, children: [
          /* @__PURE__ */ e(n, { required: !0, children: "State" }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(o, { placeholder: "IL" }) })
        ] }),
        /* @__PURE__ */ a(l, { name: "zipCode", columnSpan: { xs: 2, lg: 3 }, children: [
          /* @__PURE__ */ e(n, { required: !0, children: "ZIP Code" }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(o, { placeholder: "62701" }) })
        ] })
      ] }),
      /* @__PURE__ */ a(d, { label: "Account Settings", columns: { xs: 4, lg: 12 }, children: [
        /* @__PURE__ */ a(l, { name: "username", columnSpan: { xs: 4, lg: 12 }, children: [
          /* @__PURE__ */ e(n, { required: !0, children: "Username" }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(o, { placeholder: "johndoe" }) })
        ] }),
        /* @__PURE__ */ a(l, { name: "password", columnSpan: { xs: 4, lg: 6 }, children: [
          /* @__PURE__ */ e(n, { required: !0, children: "Password" }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(o, { type: "password", placeholder: "Min 8 characters" }) })
        ] }),
        /* @__PURE__ */ a(l, { name: "confirmPassword", columnSpan: { xs: 4, lg: 6 }, children: [
          /* @__PURE__ */ e(n, { required: !0, children: "Confirm Password" }),
          /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(o, { type: "password", placeholder: "Repeat password" }) })
        ] })
      ] }),
      /* @__PURE__ */ a(t, { className: "flex gap-[var(--spacing-3)]", children: [
        /* @__PURE__ */ e(c, { type: "submit", label: "Submit", variant: "default" }),
        /* @__PURE__ */ e(c, { type: "button", label: "Fill Sample Data", variant: "outline", onClick: w }),
        /* @__PURE__ */ e(c, { type: "button", label: "Reset", variant: "ghost", onClick: y })
      ] })
    ] })
  ] });
};
export {
  K as default
};
//# sourceMappingURL=ComprehensiveFormWrapper.js.map
