"use client";
import { cn, normalizeOptions } from "./index3.js";
import { Button } from "./index6.js";
import { Label } from "./index10.js";
import { Input } from "./index38.js";
import { Textarea } from "./index39.js";
import { useAIInteraction } from "./index407.js";
import { Checkbox } from "./index424.js";
import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "./index425.js";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/ai/AIForm/AIForm.tsx
/**
* Get default value based on field type
*/
function getDefaultValue(field) {
	if (field.defaultValue !== void 0) return field.defaultValue;
	if (field.type === "checkbox") return false;
	return "";
}
function FormField({ field, value, onChange }) {
	const fieldId = React.useId();
	const labelId = `${fieldId}-label`;
	const handleChange = React.useCallback((newValue) => {
		onChange(field.name, newValue);
	}, [onChange, field.name]);
	const renderLabel = () => /* @__PURE__ */ jsxs(Label, {
		id: labelId,
		htmlFor: fieldId,
		children: [field.label, field.required && /* @__PURE__ */ jsx("span", {
			className: "text-destructive ml-0.5",
			"aria-hidden": "true",
			children: "*"
		})]
	});
	switch (field.type) {
		case "text":
		case "email":
		case "date": return /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col gap-1.5",
			children: [renderLabel(), /* @__PURE__ */ jsx(Input, {
				id: fieldId,
				type: field.type,
				name: field.name,
				placeholder: field.placeholder,
				required: field.required,
				"aria-required": field.required,
				value: String(value ?? ""),
				onChange: (e) => handleChange(e.target.value),
				"aria-labelledby": labelId
			})]
		});
		case "number": return /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col gap-1.5",
			children: [renderLabel(), /* @__PURE__ */ jsx(Input, {
				id: fieldId,
				type: "number",
				name: field.name,
				placeholder: field.placeholder,
				required: field.required,
				"aria-required": field.required,
				min: field.min,
				max: field.max,
				value: String(value ?? ""),
				onChange: (e) => handleChange(e.target.value ? Number(e.target.value) : ""),
				"aria-labelledby": labelId
			})]
		});
		case "textarea": return /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col gap-1.5",
			children: [renderLabel(), /* @__PURE__ */ jsx(Textarea, {
				id: fieldId,
				name: field.name,
				placeholder: field.placeholder,
				required: field.required,
				"aria-required": field.required,
				rows: field.rows,
				value: String(value ?? ""),
				onChange: (e) => handleChange(e.target.value),
				"aria-labelledby": labelId
			})]
		});
		case "select": {
			const normalizedOptions = normalizeOptions(field.options);
			return /* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-1.5",
				children: [renderLabel(), /* @__PURE__ */ jsxs(Select, {
					value: String(value ?? ""),
					onValueChange: handleChange,
					children: [/* @__PURE__ */ jsx(SelectTrigger, {
						id: fieldId,
						"aria-labelledby": labelId,
						"aria-required": field.required,
						children: /* @__PURE__ */ jsx(SelectValue, { placeholder: field.placeholder })
					}), /* @__PURE__ */ jsx(SelectPopup, { children: normalizedOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
						value: option.value,
						children: option.label
					}, option.value)) })]
				})]
			});
		}
		case "checkbox": return /* @__PURE__ */ jsxs("div", {
			className: "flex items-center gap-2",
			children: [/* @__PURE__ */ jsx(Checkbox, {
				id: fieldId,
				checked: Boolean(value),
				onCheckedChange: handleChange,
				"aria-labelledby": labelId,
				"aria-required": field.required
			}), /* @__PURE__ */ jsxs(Label, {
				id: labelId,
				htmlFor: fieldId,
				className: "cursor-pointer",
				children: [field.label, field.required && /* @__PURE__ */ jsx("span", {
					className: "text-destructive ml-0.5",
					"aria-hidden": "true",
					children: "*"
				})]
			})]
		});
		case "radio": {
			const normalizedOptions = normalizeOptions(field.options);
			return /* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-1.5",
				children: [/* @__PURE__ */ jsxs("span", {
					id: labelId,
					className: "text-sm font-medium text-foreground",
					children: [field.label, field.required && /* @__PURE__ */ jsx("span", {
						className: "text-destructive ml-0.5",
						"aria-hidden": "true",
						children: "*"
					})]
				}), /* @__PURE__ */ jsx("div", {
					className: "flex flex-col gap-2",
					role: "radiogroup",
					"aria-labelledby": labelId,
					"aria-required": field.required,
					children: normalizedOptions.map((option) => {
						const optionId = `${fieldId}-${option.value}`;
						return /* @__PURE__ */ jsxs("div", {
							className: "flex items-center gap-2",
							children: [/* @__PURE__ */ jsx("input", {
								type: "radio",
								id: optionId,
								name: field.name,
								value: option.value,
								checked: value === option.value,
								onChange: (e) => handleChange(e.target.value),
								className: "size-4 accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
							}), /* @__PURE__ */ jsx(Label, {
								htmlFor: optionId,
								className: "cursor-pointer font-normal",
								children: option.label
							})]
						}, option.value);
					})
				})]
			});
		}
		default: return null;
	}
}
/**
* AIForm - An interactive form for use in AI chat messages.
*
* Renders a form based on a schema that emits interaction events when submitted.
* Supports various field types including text, email, number, textarea, select, checkbox, and radio.
*/
function AIForm({ schema, className }) {
	const { onInteraction } = useAIInteraction();
	const [formData, setFormData] = React.useState(() => {
		const initial = {};
		for (const field of schema.fields) initial[field.name] = getDefaultValue(field);
		return initial;
	});
	const handleFieldChange = React.useCallback((name, value) => {
		setFormData((prev) => ({
			...prev,
			[name]: value
		}));
	}, []);
	const handleSubmit = React.useCallback((e) => {
		e.preventDefault();
		onInteraction?.({
			componentId: schema.id,
			componentType: "form",
			action: "submit",
			value: formData,
			timestamp: Date.now()
		});
	}, [
		onInteraction,
		schema.id,
		formData
	]);
	const isHorizontal = schema.layout === "horizontal";
	return /* @__PURE__ */ jsxs("form", {
		"data-slot": "ai-form",
		"aria-label": schema.title ?? "Interactive form",
		className: cn("flex flex-col gap-4", className),
		onSubmit: handleSubmit,
		children: [
			(schema.title || schema.description) && /* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-1",
				children: [schema.title && /* @__PURE__ */ jsx("h3", {
					className: "text-base font-semibold text-foreground",
					children: schema.title
				}), schema.description && /* @__PURE__ */ jsx("p", {
					className: "text-sm text-muted-foreground",
					children: schema.description
				})]
			}),
			/* @__PURE__ */ jsx("div", {
				"data-slot": "ai-form-fields",
				className: cn("flex gap-4", isHorizontal ? "flex-row flex-wrap" : "flex-col"),
				children: schema.fields.map((field) => /* @__PURE__ */ jsx("div", {
					className: cn(isHorizontal && "flex-1 min-w-[200px]"),
					children: /* @__PURE__ */ jsx(FormField, {
						field,
						value: formData[field.name],
						onChange: handleFieldChange
					})
				}, field.name))
			}),
			/* @__PURE__ */ jsx("div", {
				className: "flex justify-end",
				children: /* @__PURE__ */ jsx(Button, {
					type: "submit",
					appearance: "gradient",
					variant: "primary",
					children: schema.submitLabel ?? "Submit"
				})
			})
		]
	});
}
AIForm.displayName = "AIForm";
//#endregion
export { AIForm as default };

//# sourceMappingURL=index426.js.map