/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-29d58ba | Cube Dev Team */
import { tasty } from "../../../tasty/tasty.js";
import { mergeProps } from "../../../utils/react/mergeProps.js";
import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
import { _Text } from "../../content/Text.js";
import { Space } from "../../layout/Space.js";
import { _Item } from "../../content/Item/Item.js";
import { InfoCircleIcon } from "../../../icons/InfoCircleIcon.js";
import { Flex } from "../../layout/Flex.js";
import { _Label } from "../Label.js";
import { forwardRef } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/form/FieldWrapper/FieldWrapper.tsx
const FieldElement = tasty({
	qa: "Field",
	styles: {
		display: "grid",
		width: "auto",
		gridColumns: {
			"": "minmax(0, 1fr)",
			"has-sider": "($full-label-width, auto) minmax(0, 1fr)",
			"has-split": "auto auto"
		},
		gap: 0,
		placeItems: {
			"": "baseline stretch",
			"has-split": "center"
		},
		placeContent: {
			"": "initial",
			"has-split": "space-between"
		},
		"$full-label-width": "($label-width + 1x)",
		LabelArea: {
			display: "block",
			width: {
				"": "initial",
				"has-sider": "$label-width"
			},
			margin: {
				"": "1x bottom",
				"has-sider": "1x right",
				"has-split": "1x right",
				":empty": "0"
			}
		},
		InputArea: {
			display: "block",
			flow: "column",
			gap: ".5x",
			gridColumn: {
				"": "initial",
				"has-sider": 2,
				"has-split": 2
			}
		}
	}
});
FieldElement.displayName = "FieldWrapperElement";
const MessageElement = tasty({
	qa: "Field_Message",
	styles: {
		preset: "t4",
		color: {
			"": "#dark-02",
			invalid: "#danger-text",
			valid: "#success-text",
			disabled: "#dark.40"
		},
		textAlign: "left",
		userSelect: "none"
	}
});
const DescriptionElement = tasty({
	qa: "Field_Description",
	styles: {
		preset: "t4",
		color: "#dark-03",
		textAlign: "left",
		userSelect: "none"
	}
});
/**
* A wrapper for form fields to provide additional decoration for inputs.
* @internal Do not use this component directly.
*/
const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
	const { as, labelPosition = "top", label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, children } = props;
	const labelComponent = label ? /* @__PURE__ */ jsx(_Label, {
		as: as === "label" ? "div" : "label",
		styles: labelStyles,
		labelPosition,
		isRequired: requiredMark ? isRequired : false,
		isDisabled,
		necessityIndicator,
		validationState,
		"aria-label": typeof label === "string" ? label : void 0,
		...labelProps,
		children: /* @__PURE__ */ jsxs(Flex, {
			placeContent: "baseline space-between",
			width: "100%",
			children: [/* @__PURE__ */ jsxs(Space, {
				placeItems: "center",
				gap: "0.75x",
				children: [
					/* @__PURE__ */ jsx("div", { children: label }),
					tooltip ? /* @__PURE__ */ jsx(_Item, {
						icon: /* @__PURE__ */ jsx(InfoCircleIcon, { color: "#primary-text" }),
						size: "inline",
						tooltip: typeof tooltip === "string" ? tooltip : { title: tooltip }
					}) : null,
					labelSuffix ? /* @__PURE__ */ jsx("div", { children: labelSuffix }) : null
				]
			}), extra && /* @__PURE__ */ jsx(_Text, {
				preset: "t3",
				children: extra
			})]
		})
	}) : null;
	const createDescriptionComponent = () => {
		if (!description) return null;
		return /* @__PURE__ */ jsx(DescriptionElement, {
			"data-element": "Description",
			children: wrapNodeIfPlain(description, () => /* @__PURE__ */ jsx("span", { children: description }))
		});
	};
	const descriptionForLabel = labelPosition === "side" || labelPosition === "split" ? createDescriptionComponent() : null;
	const descriptionForInput = labelPosition === "top" ? createDescriptionComponent() : null;
	const mods = {
		"has-sider": labelPosition === "side",
		"has-split": labelPosition === "split",
		"has-description": !!description,
		invalid: validationState === "invalid",
		valid: validationState === "valid"
	};
	const displayMessage = errorMessage || message;
	const isErrorMessage = !!errorMessage;
	const mergedFieldProps = styles ? mergeProps(fieldProps, { styles }) : fieldProps;
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(FieldElement, {
		ref,
		as: as ?? "div",
		mods,
		isHidden,
		...mergedFieldProps,
		children: [labelComponent || descriptionForLabel ? /* @__PURE__ */ jsxs("div", {
			"data-element": "LabelArea",
			children: [labelComponent, descriptionForLabel]
		}) : null, /* @__PURE__ */ jsxs("div", {
			"data-element": "InputArea",
			children: [
				Component,
				descriptionForInput,
				displayMessage && !isDisabled && /* @__PURE__ */ jsx(MessageElement, {
					mods: {
						...mods,
						invalid: isErrorMessage || validationState === "invalid"
					},
					styles: messageStyles,
					role: isErrorMessage || validationState === "invalid" ? "alert" : void 0,
					children: displayMessage
				})
			]
		})]
	}), children] });
});

//#endregion
export { FieldWrapper };
//# sourceMappingURL=FieldWrapper.js.map