import { i as FormSize, n as AnalyticsId, r as FormOnColor } from "./constants2.js";
import { t as isComponent } from "./component.js";
import { t as useIdWithFallback } from "./useIdWithFallback.js";
import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
import { t as FormFieldTag_default } from "./FormFieldTag.js";
import { n as Checkbox_default } from "./Checkbox.js";
import { t as Title_default } from "./Title2.js";
import { t as FormLayout_default } from "./FormLayout.js";
import { t as Input_default } from "./Input.js";
import { r as RadioButton_default, t as getRadioLabelClasses } from "./utils3.js";
import { t as Select_default } from "./Select.js";
import { t as Slider_default } from "./Slider.js";
import { t as Textarea_default } from "./Textarea.js";
import classNames from "classnames";
import React, { useId, useState } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import formGroupStyles from "./components/FormGroup/styles.module.scss";
const FormGroup = (props) => {
	const { ariaLabelledBy, className, errorTextId: errorTextIdProp, fieldsetClassName, formFieldTag, legendClassName, onColor = FormOnColor.onwhite, size = FormSize.medium, error, name, htmlMarkup = "fieldset", renderError = true, errorWrapperClassName, errorWrapperTestId, errorMessageRef, legendHtmlMarkup = "h5", titleHtmlMarkup = "h4" } = props;
	const [checkedRadioId, setCheckedRadioId] = useState();
	const radioGroupId = useId();
	const errorTextId = useIdWithFallback(errorTextIdProp);
	const onDark = onColor === FormOnColor.ondark;
	const isLarge = size === FormSize.large;
	const formGroupWrapperClasses = classNames(formGroupStyles["form-group-wrapper"], className);
	const titleClasses = classNames({ [formGroupStyles["form-group-wrapper__title--on-dark"]]: onDark && !error });
	const CustomTagForLegend = legendHtmlMarkup;
	const legendClasses = classNames(formGroupStyles["field-set__legend"], { [formGroupStyles["field-set__legend--on-dark"]]: onDark && !error }, legendClassName);
	const fieldsetClasses = classNames(formGroupStyles["field-set"], fieldsetClassName);
	const mapFormComponent = (child, index) => {
		if (isComponent(child, FormLayout_default)) return React.cloneElement(child, {
			size,
			mapHelper: mapFormComponent
		});
		else if (isComponent(child, FormGroup)) return React.cloneElement(child, {
			onColor,
			size,
			error,
			renderError: false,
			errorTextId
		});
		else if (isComponent(child, Checkbox_default)) return React.cloneElement(child, {
			name: name ?? child.props.name,
			onColor,
			size,
			error: !!error,
			errorTextId
		});
		else if (isComponent(child, RadioButton_default)) {
			const radioId = typeof child.props.inputId === "undefined" ? radioGroupId + index : child.props.inputId;
			return React.cloneElement(child, {
				inputId: radioId,
				name: name ?? child.props.name,
				onColor,
				size,
				onChange: (event) => {
					setCheckedRadioId(event.target.id);
					if (child.props.onChange) child.props.onChange(event);
				},
				error: !!error,
				errorTextId,
				labelClassNames: getRadioLabelClasses(radioId, onColor, isLarge, checkedRadioId)
			});
		} else if (isComponent(child, Input_default)) return React.cloneElement(child, {
			name: name ?? child.props.name,
			onColor,
			size,
			error: !!error,
			errorTextId
		});
		else if (isComponent(child, Textarea_default)) return React.cloneElement(child, {
			name: name ?? child.props.name,
			onColor,
			error: !!error,
			errorTextId
		});
		else if (isComponent(child, Select_default)) return React.cloneElement(child, {
			name: name ?? child.props.name,
			onColor,
			error: !!error,
			errorTextId
		});
		else if (isComponent(child, Slider_default)) return React.cloneElement(child, {
			name: name ?? child.props.name,
			error: !!error,
			errorTextId
		});
		return child;
	};
	const formGroupContent = () => {
		return /* @__PURE__ */ jsxs("div", { children: [htmlMarkup === "div" && /* @__PURE__ */ jsxs("div", {
			className: fieldsetClasses,
			children: [props.legend && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(CustomTagForLegend, {
				className: legendClasses,
				children: [props.legend, formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag)]
			}) }), React.Children.map(props.children, mapFormComponent)]
		}), htmlMarkup === "fieldset" && /* @__PURE__ */ jsxs("fieldset", {
			"aria-labelledby": ariaLabelledBy,
			name: props.fieldsetName,
			className: fieldsetClasses,
			children: [props.legend && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("legend", {
				className: legendClasses,
				children: [props.legend, formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag)]
			}) }), React.Children.map(props.children, mapFormComponent)]
		})] });
	};
	return /* @__PURE__ */ jsxs("div", {
		"data-testid": props.testId,
		"data-analyticsid": AnalyticsId.FormGroup,
		className: formGroupWrapperClasses,
		children: [props.title && /* @__PURE__ */ jsx(Title_default, {
			className: titleClasses,
			htmlMarkup: titleHtmlMarkup,
			appearance: "title4",
			margin: {
				marginTop: 0,
				marginBottom: error ? 1 : 2
			},
			children: props.title
		}), /* @__PURE__ */ jsx(ErrorWrapper_default, {
			className: errorWrapperClassName,
			errorText: error,
			testId: errorWrapperTestId,
			errorTextId,
			errorMessageRef,
			renderError,
			children: formGroupContent()
		})]
	});
};
FormGroup.displayName = "FormGroup";
var FormGroup_default = FormGroup;
export { FormGroup_default as n, FormGroup as t };

//# sourceMappingURL=FormGroup.js.map