'use client';

import { useFormField } from "../FormField.mjs";
import { FormItemLayout } from "../layout/FormItemLayout.mjs";
import { Form } from "../Form.mjs";
import { jsx } from "react/jsx-runtime";
import { useFormContext } from "react-hook-form";

//#region src/components/Form/elements/FormElement.tsx
const FormFieldElement = ({ field, name, label, Element, isRequired = false, info, description, showErrorMessage = true, ...props }) => {
	const { error } = useFormField();
	const { value: fieldValue, onChange: fieldOnChange, ...fieldRest } = field ?? {};
	const propsAny = props;
	const mergedValue = propsAny.value !== void 0 ? propsAny.value : fieldValue ?? "";
	const mergedOnChange = (...args) => {
		if (typeof fieldOnChange === "function") fieldOnChange(...args);
		if (typeof propsAny.onChange === "function") propsAny.onChange(...args);
	};
	return /* @__PURE__ */ jsx(FormItemLayout, {
		htmlFor: name,
		label,
		description,
		isRequired,
		info,
		showErrorMessage,
		"aria-invalid": !!error,
		children: /* @__PURE__ */ jsx(Element, {
			"data-testid": "element",
			id: name,
			...fieldRest,
			...props,
			value: mergedValue,
			onChange: mergedOnChange,
			children: props.children
		})
	});
};
/**
* FormElement is a component that allows you to create a form element with a label, description, error message, and validation.
*
* The Element prop is the type of the element that will be rendered.
* This element will interact with the FormContext and will be controlled by the FormControl component.
* The props used to control the element will be `value` and `onChange`.
*/
const FormElement = (props) => {
	const { control } = useFormContext();
	return /* @__PURE__ */ jsx(Form.Field, {
		control,
		name: props.name,
		render: ({ field }) => /* @__PURE__ */ jsx(FormFieldElement, {
			...props,
			field
		})
	});
};

//#endregion
export { FormElement };
//# sourceMappingURL=FormElement.mjs.map