import { h as e } from "./chunk.BlbRoQQ3.js";
import { a3 as t } from "./use-page-data.Cb2SuuwJ.js";
import "./chunk-LSPN22SI.D75E3zS-.js";
import { c as n } from "./twind.BiM9xcCd.js";
import { b as r } from "./jsx-runtime.DF4K5VCp.js";
import "./chroma-js.Dcir27CH.js";
import "./color-system.Dp99zR0T.js";
import "./react.BZZIbN3T.js";
import { b as i, c as a } from "./schema-resolver.p7B_pu36.js";
import { b as o } from "./use-datarecord.Hg48JvBA.js";
import { b as s } from "./use-brick-style.DDPl-_C1.js";
import "./use-brick-manifest.Iv9SG-7-.js";
import { b as c } from "./BrickRoot.DbISziyH.js";
import { forwardRef as l, useState as u } from "react";
var d = /* @__PURE__ */ e(r());
const f = n("px-3 py-2 border border-base-200 rounded-md shadow-inset\n  focus:(outline-2 outline-offset-0 outline-accent-500 ring-none border-accent-500)\n  placeholder:text-inherit placeholder:opacity-70"), p = ({ fieldName: e, title: t, required: n, description: r, children: i }) => /* @__PURE__ */ (0, d.jsxs)("div", {
	className: "flex-1 flex flex-col gap-1",
	children: [/* @__PURE__ */ (0, d.jsxs)("label", {
		htmlFor: e,
		className: "font-medium",
		children: [
			t,
			" ",
			n && /* @__PURE__ */ (0, d.jsx)("span", { children: "*" })
		]
	}), i]
}), m = ({ fieldName: e, fieldSchema: t, value: r, onChange: i, title: a, required: o, description: s }) => {
	let c = typeof r == "boolean" ? r : !1;
	return /* @__PURE__ */ (0, d.jsx)(p, {
		fieldName: e,
		title: a,
		required: o,
		description: s,
		children: /* @__PURE__ */ (0, d.jsxs)("div", {
			className: "flex items-center space-x-3",
			children: [/* @__PURE__ */ (0, d.jsx)("input", {
				id: e,
				name: e,
				type: "checkbox",
				defaultChecked: c,
				onChange: (e) => i(e.target.checked),
				required: o,
				className: n("rounded border border-base-200 focus:outline-none focus:(ring-2 ring-accent-500 border-accent-500) text-accent-500")
			}), /* @__PURE__ */ (0, d.jsxs)("label", {
				htmlFor: e,
				className: "font-medium",
				children: [
					a,
					" ",
					o && /* @__PURE__ */ (0, d.jsx)("span", { children: "*" })
				]
			})]
		})
	});
}, h = ({ fieldName: e, fieldSchema: t, value: n, onChange: r, title: i, required: a, description: o }) => {
	let s = typeof n == "number" ? n : "";
	return /* @__PURE__ */ (0, d.jsx)(p, {
		fieldName: e,
		title: i,
		required: a,
		description: o,
		children: /* @__PURE__ */ (0, d.jsx)("input", {
			id: e,
			name: e,
			type: "number",
			value: s,
			onChange: (e) => {
				let t = e.target.value;
				r(t === "" ? 0 : Number(t));
			},
			placeholder: t["ui:placeholder"],
			min: t.minimum,
			max: t.maximum,
			required: a,
			className: f
		})
	});
}, g = ({ fieldName: e, fieldSchema: t, value: r, onChange: i, title: a, required: o, description: s }) => {
	let c = t.enum || [], l = typeof r == "string" ? r : "", u = t.metadata?.["ui:widget"], m = c.reduce((e, t) => t.length > e.length ? t : e, t["ui:placeholder"] || "Choose an option"), h = Math.max(m.length * .6 + 5, 10), g = c.length === 1 ? "checkbox" : u;
	return g === "checkbox" ? /* @__PURE__ */ (0, d.jsx)("div", {
		className: "flex-1 flex flex-col gap-1",
		children: /* @__PURE__ */ (0, d.jsxs)("fieldset", { children: [/* @__PURE__ */ (0, d.jsxs)("legend", {
			className: "block text-sm font-medium ",
			children: [
				a,
				" ",
				o && /* @__PURE__ */ (0, d.jsx)("span", {
					className: "text-red-500",
					children: "*"
				})
			]
		}), /* @__PURE__ */ (0, d.jsx)("div", {
			className: "space-y-2 mt-2",
			children: c.map((t) => /* @__PURE__ */ (0, d.jsxs)("label", {
				className: "flex items-center space-x-2",
				children: [/* @__PURE__ */ (0, d.jsx)("input", {
					type: "checkbox",
					name: e,
					value: t,
					onChange: (e) => i(e.target.checked ? e.target.value : ""),
					required: o,
					className: n("rounded border border-base-200 focus:outline-none focus:(ring-2 ring-accent-500 border-accent-500) text-accent-500")
				}), /* @__PURE__ */ (0, d.jsx)("span", {
					className: "text-sm",
					children: t
				})]
			}, t))
		})] })
	}) : g === "radio" ? /* @__PURE__ */ (0, d.jsx)("div", {
		className: "flex-1 flex flex-col gap-1",
		children: /* @__PURE__ */ (0, d.jsxs)("fieldset", { children: [/* @__PURE__ */ (0, d.jsxs)("legend", {
			className: "font-medium",
			children: [
				a,
				" ",
				o && /* @__PURE__ */ (0, d.jsx)("span", { children: "*" })
			]
		}), /* @__PURE__ */ (0, d.jsx)("div", {
			className: "space-y-2 mt-2",
			children: c.map((t) => /* @__PURE__ */ (0, d.jsxs)("label", {
				className: "flex items-center space-x-2",
				children: [/* @__PURE__ */ (0, d.jsx)("input", {
					type: "radio",
					name: e,
					value: t,
					checked: l === t,
					onChange: (e) => i(e.target.value),
					required: o,
					className: "border border-base-200 focus:outline-none focus:(ring-2 ring-accent-500 border-accent-500) text-accent-500"
				}), /* @__PURE__ */ (0, d.jsx)("span", { children: t })]
			}, t))
		})] })
	}) : /* @__PURE__ */ (0, d.jsx)(p, {
		fieldName: e,
		title: a,
		required: o,
		description: s,
		children: /* @__PURE__ */ (0, d.jsxs)("select", {
			id: e,
			name: e,
			value: l,
			onChange: (e) => i(e.target.value),
			required: o,
			className: n(f, "w-full"),
			style: { minWidth: `${h}rem` },
			children: [/* @__PURE__ */ (0, d.jsx)("option", {
				value: "",
				disabled: !0,
				children: t["ui:placeholder"] || t.description || "Choose an option"
			}), c.map((e) => /* @__PURE__ */ (0, d.jsx)("option", {
				value: e,
				children: e
			}, e))]
		})
	});
}, _ = ({ fieldName: e, fieldSchema: t, value: n, onChange: r, title: i, required: a, description: o }) => {
	let s = typeof n == "string" ? n : "";
	return /* @__PURE__ */ (0, d.jsx)(p, {
		fieldName: e,
		title: i,
		required: a,
		description: o,
		children: /* @__PURE__ */ (0, d.jsx)("input", {
			id: e,
			name: e,
			type: "email",
			value: s,
			onChange: (e) => r(e.target.value),
			placeholder: t["ui:placeholder"],
			required: a,
			className: f
		})
	});
}, v = ({ fieldName: e, fieldSchema: t, value: n, onChange: r, title: i, required: a, description: o }) => {
	let s = typeof n == "string" ? n : "";
	return /* @__PURE__ */ (0, d.jsx)(p, {
		fieldName: e,
		title: i,
		required: a,
		description: o,
		children: /* @__PURE__ */ (0, d.jsx)("input", {
			id: e,
			name: e,
			type: "url",
			value: s,
			onChange: (e) => r(e.target.value),
			placeholder: t["ui:placeholder"],
			required: a,
			className: f
		})
	});
}, y = ({ fieldName: e, fieldSchema: t, value: n, onChange: r, title: i, required: a, description: o }) => {
	let s = typeof n == "string" ? n : "";
	return /* @__PURE__ */ (0, d.jsx)(p, {
		fieldName: e,
		title: i,
		required: a,
		description: o,
		children: /* @__PURE__ */ (0, d.jsx)("input", {
			id: e,
			name: e,
			type: "date",
			value: s,
			onChange: (e) => r(e.target.value),
			required: a,
			className: f
		})
	});
}, b = ({ fieldName: e, fieldSchema: t, value: n, onChange: r, title: i, required: a, description: o }) => {
	let s = typeof n == "string" ? n : "";
	return /* @__PURE__ */ (0, d.jsx)(p, {
		fieldName: e,
		title: i,
		required: a,
		description: o,
		children: /* @__PURE__ */ (0, d.jsx)("input", {
			id: e,
			name: e,
			type: "datetime-local",
			value: s,
			onChange: (e) => r(e.target.value),
			required: a,
			className: f
		})
	});
}, x = ({ fieldName: e, fieldSchema: t, value: r, onChange: i, title: a, required: o, description: s }) => {
	let c = typeof r == "string" ? r : "";
	return /* @__PURE__ */ (0, d.jsx)(p, {
		fieldName: e,
		title: a,
		required: o,
		description: s,
		children: /* @__PURE__ */ (0, d.jsx)("input", {
			id: e,
			name: e,
			type: "text",
			value: c,
			onChange: (e) => i(e.target.value),
			placeholder: t["ui:placeholder"],
			minLength: t.minLength,
			maxLength: t.maxLength,
			required: o,
			className: n(f)
		})
	});
}, S = ({ fieldName: e, fieldSchema: t, value: n, onChange: r, title: i, required: a, description: o }) => {
	let s = typeof n == "string" ? n : "";
	return /* @__PURE__ */ (0, d.jsx)(p, {
		fieldName: e,
		title: i,
		required: a,
		description: o,
		children: /* @__PURE__ */ (0, d.jsx)("textarea", {
			id: e,
			name: e,
			value: s,
			onChange: (e) => r(e.target.value),
			placeholder: t["ui:placeholder"],
			minLength: t.minLength,
			maxLength: t.maxLength,
			required: a,
			rows: 4,
			className: f
		})
	});
};
function C(e) {
	if (e.enum && Array.isArray(e.enum) && e.enum.length > 0) return "datarecord-select";
	if (e.type === "string" && !e.format && e.metadata?.["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 w(e, t, n, r, i, o, s) {
	let c = a(i, o) ?? n.default, l = Array.isArray(r.required) ? r.required.includes(t) : !1, u = n.title ?? n["ui:title"], f = n.description ?? n["ui:description"], p = {
		fieldName: t,
		fieldSchema: n,
		value: c,
		onChange: (e) => s({ [o]: e }, o),
		title: u || t,
		required: l,
		description: f
	};
	switch (e) {
		case "datarecord-string": return /* @__PURE__ */ (0, d.jsx)(x, { ...p }, `field-${o}`);
		case "datarecord-textarea": return /* @__PURE__ */ (0, d.jsx)(S, { ...p }, `field-${o}`);
		case "datarecord-select": return /* @__PURE__ */ (0, d.jsx)(g, { ...p }, `field-${o}`);
		case "datarecord-number": return /* @__PURE__ */ (0, d.jsx)(h, { ...p }, `field-${o}`);
		case "datarecord-boolean": return /* @__PURE__ */ (0, d.jsx)(m, { ...p }, `field-${o}`);
		case "datarecord-email": return /* @__PURE__ */ (0, d.jsx)(_, { ...p }, `field-${o}`);
		case "datarecord-url": return /* @__PURE__ */ (0, d.jsx)(v, { ...p }, `field-${o}`);
		case "datarecord-date": return /* @__PURE__ */ (0, d.jsx)(y, { ...p }, `field-${o}`);
		case "datarecord-datetime": return /* @__PURE__ */ (0, d.jsx)(b, { ...p }, `field-${o}`);
		default: return null;
	}
}
function T(e, t, n) {
	let r = [], a = Object.entries(e.properties).sort(([e, t], [n, r]) => {
		let a = i(t), o = i(r), s = a.metadata?.order, c = o.metadata?.order;
		return s !== void 0 && c !== void 0 ? s - c : s === void 0 ? c === void 0 ? e.localeCompare(n) : 1 : -1;
	});
	return a.forEach(([a, o]) => {
		let s = i(o);
		if (s["ui:field"] === "hidden") return;
		if (s.metadata?.filter) {
			let n = s.metadata.filter;
			if (!n(e, t)) {
				console.warn("processDatarecordSchemaToFields: Field filter returned false for", a);
				return;
			}
		}
		let c = a, l = C(s);
		if (l) {
			let i = w(l, a, s, e, t, c, n);
			i ? r.push(i) : console.log("!!! No datarecord field component created for", a);
		} else console.log("!!! Unknown datarecord field type for", a, s);
	}), r;
}
const E = l((e, r) => {
	let { brick: i } = e, a = s(i), [l, f] = u("idle"), { button: p, direction: m,...h } = a, { title: g, buttonLabel: _, successMessage: v, errorMessage: y, intro: b, datarecordId: x, editable: S = !0 } = i.props, C = i.props.button || {}, w = o(x), [E, D] = u({}), O = (e, t) => {
		let n = {
			...E,
			...e
		};
		D(n);
	}, k = (e) => {
		e.preventDefault(), !S && (f("submitting"), fetch(new URL(window.location.href), {
			method: "POST",
			body: new FormData(e.target),
			headers: { "X-DataRecord-Id": x }
		}).then((e) => {
			e.ok ? f("success") : f("error");
		}).catch((e) => {
			f("error");
		}));
	};
	if (x && !w) return S ? /* @__PURE__ */ (0, d.jsx)(c, {
		brick: i,
		editable: S,
		manifest: t,
		className: "p-4 border border-red-200 bg-red-50 text-red-600 rounded",
		children: "Error loading datarecord"
	}) : null;
	if (!w) return /* @__PURE__ */ (0, d.jsx)(c, {
		brick: i,
		editable: S,
		manifest: t,
		className: n("text-center p-4 flex items-center justify-center", Object.values(h)),
		children: x ? "Loading database..." : /* @__PURE__ */ (0, d.jsxs)("span", { children: [
			"This is a form brick.",
			/* @__PURE__ */ (0, d.jsx)("br", {}),
			"To use it, please select a database",
			/* @__PURE__ */ (0, d.jsx)("br", {}),
			" you want to connect this form with."
		] })
	});
	let A = w.schema, j = T(A, E, O);
	return /* @__PURE__ */ (0, d.jsxs)(c, {
		brick: i,
		editable: S,
		manifest: t,
		as: "form",
		onSubmit: k,
		className: n("flex flex-col gap-4", Object.values(h)),
		children: [
			g && /* @__PURE__ */ (0, d.jsx)("h2", {
				className: "text-[110%] font-semibold",
				children: g
			}),
			b && /* @__PURE__ */ (0, d.jsx)("p", { children: b }),
			/* @__PURE__ */ (0, d.jsx)("div", {
				className: n("flex gap-4 flex-wrap @mobile:flex-col", Object.values(m)),
				children: j
			}),
			l === "error" && /* @__PURE__ */ (0, d.jsx)("div", { children: y }),
			l === "success" && /* @__PURE__ */ (0, d.jsx)("div", { children: v }),
			/* @__PURE__ */ (0, d.jsx)("div", {
				className: n("flex", C.position),
				children: /* @__PURE__ */ (0, d.jsx)("button", {
					type: "submit",
					disabled: l === "submitting",
					className: n("btn @mobile:min-w-full", C.color, C.size === "wide" ? "@desktop:w-full" : "@desktop:min-w-fit", Object.values(p)),
					children: _ || "Submit"
				})
			})
		]
	});
});
export { E as default };

//# sourceMappingURL=form.CLLd79BL.js.map