import { jsx as r, jsxs as p } from "react/jsx-runtime";
import { c as V } from "./schema-resolver.C4i_G2fr.js";
import { forwardRef as P, useState as W } from "react";
import { c as A } from "./index.Bxix3KXR.js";
import { _ as x } from "./twind.BLUk_ZzT.js";
import { g as I } from "./get.Ba1R1ACs.js";
import { a as U } from "./use-datarecord.Borzix-r.js";
import { b as E } from "./use-section-style.Cg6VYj5D.js";
const v = x(
  `px-3 py-2 border border-base-200 rounded-md shadow-inset
  focus:(outline-2 outline-offset-0 outline-accent-500 ring-none border-accent-500)
  placeholder:text-inherit placeholder:opacity-70`
), y = ({
  fieldName: e,
  title: a,
  required: n,
  description: o,
  children: s
}) => /* @__PURE__ */ p("div", { className: "flex-1 flex flex-col gap-1", children: [
  /* @__PURE__ */ p("label", { htmlFor: e, className: "font-medium", children: [
    a,
    " ",
    n && /* @__PURE__ */ r("span", { children: "*" })
  ] }),
  s
] }), R = ({
  fieldName: e,
  fieldSchema: a,
  value: n,
  onChange: o,
  title: s,
  required: t,
  description: c
}) => /* @__PURE__ */ r(y, { fieldName: e, title: s, required: t, description: c, children: /* @__PURE__ */ p("div", { className: "flex items-center space-x-3", children: [
  /* @__PURE__ */ r(
    "input",
    {
      id: e,
      name: e,
      type: "checkbox",
      defaultChecked: typeof n == "boolean" ? n : !1,
      onChange: (l) => o(l.target.checked),
      required: t,
      className: x(
        "rounded border border-base-200 focus:outline-none focus:(ring-2 ring-accent-500 border-accent-500) text-accent-500"
      )
    }
  ),
  /* @__PURE__ */ p("label", { htmlFor: e, className: "font-medium", children: [
    s,
    " ",
    t && /* @__PURE__ */ r("span", { children: "*" })
  ] })
] }) }), z = ({
  fieldName: e,
  fieldSchema: a,
  value: n,
  onChange: o,
  title: s,
  required: t,
  description: c
}) => /* @__PURE__ */ r(y, { fieldName: e, title: s, required: t, description: c, children: /* @__PURE__ */ r(
  "input",
  {
    id: e,
    name: e,
    type: "number",
    value: typeof n == "number" ? n : "",
    onChange: (l) => {
      const m = l.target.value;
      o(m === "" ? 0 : Number(m));
    },
    placeholder: a["ui:placeholder"],
    min: a.minimum,
    max: a.maximum,
    required: t,
    className: v
  }
) }), B = ({
  fieldName: e,
  fieldSchema: a,
  value: n,
  onChange: o,
  title: s,
  required: t,
  description: c
}) => {
  var h;
  const i = a.enum || [], l = typeof n == "string" ? n : "", m = (h = a.metadata) == null ? void 0 : h["ui:widget"], g = i.reduce(
    (d, b) => b.length > d.length ? b : d,
    a["ui:placeholder"] || "Choose an option"
  ), u = Math.max(g.length * 0.6 + 5, 10), f = i.length === 1 ? "checkbox" : m;
  return f === "checkbox" ? /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col gap-1", children: /* @__PURE__ */ p("fieldset", { children: [
    /* @__PURE__ */ p("legend", { className: "block text-sm font-medium ", children: [
      s,
      " ",
      t && /* @__PURE__ */ r("span", { className: "text-red-500", children: "*" })
    ] }),
    /* @__PURE__ */ r("div", { className: "space-y-2 mt-2", children: i.map((d) => /* @__PURE__ */ p("label", { className: "flex items-center space-x-2", children: [
      /* @__PURE__ */ r(
        "input",
        {
          type: "checkbox",
          name: e,
          value: d,
          onChange: (b) => o(b.target.checked ? b.target.value : ""),
          required: t,
          className: x(
            "rounded border border-base-200 focus:outline-none focus:(ring-2 ring-accent-500 border-accent-500) text-accent-500"
          )
        }
      ),
      /* @__PURE__ */ r("span", { className: "text-sm", children: d })
    ] }, d)) })
  ] }) }) : f === "radio" ? /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col gap-1", children: /* @__PURE__ */ p("fieldset", { children: [
    /* @__PURE__ */ p("legend", { className: "font-medium", children: [
      s,
      " ",
      t && /* @__PURE__ */ r("span", { children: "*" })
    ] }),
    /* @__PURE__ */ r("div", { className: "space-y-2 mt-2", children: i.map((d) => /* @__PURE__ */ p("label", { className: "flex items-center space-x-2", children: [
      /* @__PURE__ */ r(
        "input",
        {
          type: "radio",
          name: e,
          value: d,
          checked: l === d,
          onChange: (b) => o(b.target.value),
          required: t,
          className: "border border-base-200 focus:outline-none focus:(ring-2 ring-accent-500 border-accent-500) text-accent-500"
        }
      ),
      /* @__PURE__ */ r("span", { children: d })
    ] }, d)) })
  ] }) }) : /* @__PURE__ */ r(y, { fieldName: e, title: s, required: t, description: c, children: /* @__PURE__ */ p(
    "select",
    {
      id: e,
      name: e,
      value: l,
      onChange: (d) => o(d.target.value),
      required: t,
      className: x(v, "w-full"),
      style: { minWidth: `${u}rem` },
      children: [
        /* @__PURE__ */ r("option", { value: "", disabled: !0, children: a["ui:placeholder"] || a.description || "Choose an option" }),
        i.map((d) => /* @__PURE__ */ r("option", { value: d, children: d }, d))
      ]
    }
  ) });
}, G = ({
  fieldName: e,
  fieldSchema: a,
  value: n,
  onChange: o,
  title: s,
  required: t,
  description: c
}) => /* @__PURE__ */ r(y, { fieldName: e, title: s, required: t, description: c, children: /* @__PURE__ */ r(
  "input",
  {
    id: e,
    name: e,
    type: "email",
    value: typeof n == "string" ? n : "",
    onChange: (l) => o(l.target.value),
    placeholder: a["ui:placeholder"],
    required: t,
    className: v
  }
) }), M = ({
  fieldName: e,
  fieldSchema: a,
  value: n,
  onChange: o,
  title: s,
  required: t,
  description: c
}) => /* @__PURE__ */ r(y, { fieldName: e, title: s, required: t, description: c, children: /* @__PURE__ */ r(
  "input",
  {
    id: e,
    name: e,
    type: "url",
    value: typeof n == "string" ? n : "",
    onChange: (l) => o(l.target.value),
    placeholder: a["ui:placeholder"],
    required: t,
    className: v
  }
) }), X = ({
  fieldName: e,
  fieldSchema: a,
  value: n,
  onChange: o,
  title: s,
  required: t,
  description: c
}) => /* @__PURE__ */ r(y, { fieldName: e, title: s, required: t, description: c, children: /* @__PURE__ */ r(
  "input",
  {
    id: e,
    name: e,
    type: "date",
    value: typeof n == "string" ? n : "",
    onChange: (l) => o(l.target.value),
    required: t,
    className: v
  }
) }), _ = ({
  fieldName: e,
  fieldSchema: a,
  value: n,
  onChange: o,
  title: s,
  required: t,
  description: c
}) => /* @__PURE__ */ r(y, { fieldName: e, title: s, required: t, description: c, children: /* @__PURE__ */ r(
  "input",
  {
    id: e,
    name: e,
    type: "datetime-local",
    value: typeof n == "string" ? n : "",
    onChange: (l) => o(l.target.value),
    required: t,
    className: v
  }
) }), H = ({
  fieldName: e,
  fieldSchema: a,
  value: n,
  onChange: o,
  title: s,
  required: t,
  description: c
}) => /* @__PURE__ */ r(y, { fieldName: e, title: s, required: t, description: c, children: /* @__PURE__ */ r(
  "input",
  {
    id: e,
    name: e,
    type: "text",
    value: typeof n == "string" ? n : "",
    onChange: (l) => o(l.target.value),
    placeholder: a["ui:placeholder"],
    minLength: a.minLength,
    maxLength: a.maxLength,
    required: t,
    className: x(v)
  }
) }), J = ({
  fieldName: e,
  fieldSchema: a,
  value: n,
  onChange: o,
  title: s,
  required: t,
  description: c
}) => /* @__PURE__ */ r(y, { fieldName: e, title: s, required: t, description: c, children: /* @__PURE__ */ r(
  "textarea",
  {
    id: e,
    name: e,
    value: typeof n == "string" ? n : "",
    onChange: (l) => o(l.target.value),
    placeholder: a["ui:placeholder"],
    minLength: a.minLength,
    maxLength: a.maxLength,
    required: t,
    rows: 4,
    className: v
  }
) });
function K(e) {
  var a;
  if (e.enum && Array.isArray(e.enum) && e.enum.length > 0)
    return "datarecord-select";
  if (e.type === "string" && !e.format && ((a = e.metadata) != null && a["ui:multiline"]))
    return "datarecord-textarea";
  if (e.type === "string")
    switch (e.format) {
      case "email":
        return "datarecord-email";
      case "uri":
        return "datarecord-url";
      case "date":
        return "datarecord-date";
      case "date-time":
        return "datarecord-datetime";
      default:
        return "datarecord-string";
    }
  return e.type === "number" ? "datarecord-number" : e.type === "boolean" ? "datarecord-boolean" : null;
}
function Q(e, a, n, o, s, t, c) {
  const i = I(s, t) ?? n.default, l = Array.isArray(o.required) ? o.required.includes(a) : !1, m = n.title ?? n["ui:title"], g = n.description ?? n["ui:description"], u = {
    fieldName: a,
    fieldSchema: n,
    value: i,
    onChange: (f) => c({ [t]: f }, t),
    title: m || a,
    required: l,
    description: g
  };
  switch (e) {
    case "datarecord-string":
      return /* @__PURE__ */ r(H, { ...u }, `field-${t}`);
    case "datarecord-textarea":
      return /* @__PURE__ */ r(J, { ...u }, `field-${t}`);
    case "datarecord-select":
      return /* @__PURE__ */ r(B, { ...u }, `field-${t}`);
    case "datarecord-number":
      return /* @__PURE__ */ r(z, { ...u }, `field-${t}`);
    case "datarecord-boolean":
      return /* @__PURE__ */ r(R, { ...u }, `field-${t}`);
    case "datarecord-email":
      return /* @__PURE__ */ r(G, { ...u }, `field-${t}`);
    case "datarecord-url":
      return /* @__PURE__ */ r(M, { ...u }, `field-${t}`);
    case "datarecord-date":
      return /* @__PURE__ */ r(X, { ...u }, `field-${t}`);
    case "datarecord-datetime":
      return /* @__PURE__ */ r(_, { ...u }, `field-${t}`);
    default:
      return null;
  }
}
function Y(e, a, n) {
  const o = [];
  return Object.entries(e.properties).sort(([t, c], [i, l]) => {
    var h, d;
    const m = V(c), g = V(l), u = (h = m.metadata) == null ? void 0 : h.order, f = (d = g.metadata) == null ? void 0 : d.order;
    return u !== void 0 && f !== void 0 ? u - f : u !== void 0 ? -1 : f !== void 0 ? 1 : t.localeCompare(i);
  }).forEach(([t, c]) => {
    var g;
    const i = V(c);
    if (i["ui:field"] === "hidden")
      return;
    if ((g = i.metadata) != null && g.filter) {
      const u = i.metadata.filter;
      if (!u(e, a)) {
        console.warn("processDatarecordSchemaToFields: Field filter returned false for", t);
        return;
      }
    }
    const l = t, m = K(i);
    if (m) {
      const u = Q(
        m,
        t,
        i,
        e,
        a,
        l,
        n
      );
      u ? o.push(u) : console.log("!!! No datarecord field component created for", t);
    } else
      console.log("!!! Unknown datarecord field type for", t, i);
  }), o;
}
const se = P((e, a) => {
  const { brick: n } = e, o = E(n), { title: s, intro: t, datarecordId: c, align: i = "vertical", editable: l = !0 } = n.props, m = n.props.button || {}, g = m.label, u = m.color, { datarecord: f, schema: h, error: d } = U(c), [b, D] = W({}), L = (F, k) => {
    const w = { ...b, ...F };
    D(w);
  }, N = (F) => {
    if (F.preventDefault(), l) {
      console.warn("Form is editable, submission is disabled"), A("This form is not clickable in edit mode but will lead to form submission when published.", {
        style: {
          minWidth: "max-content"
        }
      });
      return;
    }
    const k = new FormData(F.target), w = l ? "http://localhost:8081/submit" : new URL(window.location.href);
    fetch(w, {
      method: "POST",
      body: k,
      headers: {
        "X-DataRecord-Id": c
      }
    }).then((C) => {
      C.ok ? console.log("Form submitted successfully") : console.error("Form submission failed");
    }).catch((C) => {
      console.error("Form submission error:", C);
    });
  };
  if (d)
    return /* @__PURE__ */ p("div", { ref: a, className: "p-4 border border-red-200 bg-red-50 text-red-600 rounded", children: [
      "Error loading datarecord: ",
      d.message
    ] });
  if (!f || !h)
    return /* @__PURE__ */ r("div", { ref: a, className: "p-4 border border-gray-200 bg-gray-50 text-gray-600 rounded", children: c ? "Loading datarecord..." : "Please select a datarecord to display the form" });
  if (!h || h.type !== "object" || !h.properties)
    return console.error("Invalid datarecord schema format", h), /* @__PURE__ */ r("div", { className: "text-red-500 text-sm", children: "Invalid datarecord schema format" });
  const $ = Y(h, b, L), { button: O, buttonPosition: T, ...j } = o;
  return /* @__PURE__ */ p("div", { ref: a, className: x("max-w-full flex-1", Object.values(j)), children: [
    s && /* @__PURE__ */ r("h2", { className: "form-title text-[110%] font-semibold mb-4", children: s }),
    t && /* @__PURE__ */ r("p", { className: "form-intro  mb-6", children: t }),
    /* @__PURE__ */ p("form", { onSubmit: N, className: "flex flex-col gap-4", children: [
      /* @__PURE__ */ r("input", { id: "datarecord-id", name: "datarecord-id", type: "hidden", value: c }),
      /* @__PURE__ */ r("div", { className: x("flex", i === "horizontal" ? "flex-row flex-wrap gap-4" : "flex-col gap-2"), children: $ }),
      /* @__PURE__ */ r("div", { className: x("flex pt-1", Object.values(T)), children: /* @__PURE__ */ r(
        "button",
        {
          type: "submit",
          className: x(
            "btn",
            u,
            m.size === "wide" ? "w-full" : "",
            Object.values(O)
          ),
          children: g || "Submit"
        }
      ) })
    ] })
  ] });
});
export {
  se as default
};
//# sourceMappingURL=form.IkzY4ehZ.js.map
