/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-af8d194 | Cube Dev Team */
import { extractStyles } from "../../../tasty/utils/styles.js";
import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
import { tasty } from "../../../tasty/tasty.js";
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { InvalidIcon } from "../../shared/InvalidIcon.js";
import { ValidIcon } from "../../shared/ValidIcon.js";
import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
import React, { cloneElement, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useFocusRing } from "react-aria";
import { mergeRefs } from "@react-aria/utils";

//#region src/components/fields/DatePicker/DateInputBase.tsx
const DateInputWrapperElement = tasty({
	qa: "DateInputWrapper",
	role: "presentation",
	styles: {
		...INPUT_WRAPPER_STYLES,
		display: "flex"
	}
});
const DateInputElement = tasty({
	role: "presentation",
	styles: {
		...DEFAULT_INPUT_STYLES,
		height: {
			"": "($size-md - 2bw)",
			"size=small": "($size-sm - 2bw)",
			"size=large": "($size-lg - 2bw)"
		},
		display: "flex",
		flow: "row",
		placeItems: "center start"
	}
});
function DateInputBase(props, ref) {
	let inputRef = useRef(null);
	let { qa, inputType, isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, validationState, isLoading, size = "medium", suffix } = props;
	let styles = extractStyles(props, CONTAINER_STYLES);
	let { focusProps, isFocused } = useFocusRing({
		isTextInput: true,
		within: true,
		autoFocus
	});
	let isInvalid = validationState === "invalid";
	let validation = cloneElement(isInvalid ? InvalidIcon : ValidIcon);
	return /* @__PURE__ */ jsxs(DateInputWrapperElement, {
		qa: qa || "DateTimeInput",
		styles,
		"data-size": size,
		"data-input-type": inputType ? inputType : "datetimeinput",
		mods: {
			disabled: isDisabled,
			focused: isFocused && !disableFocusRing,
			invalid: isInvalid,
			suffix: validationState && !isLoading || isLoading || !!suffix
		},
		...mergeProps$1(fieldProps ?? {}, focusProps),
		style,
		children: [/* @__PURE__ */ jsx("div", {
			"data-element": "Contents",
			role: "presentation",
			children: /* @__PURE__ */ jsx(DateInputElement, {
				ref: mergeRefs(ref, inputRef),
				"data-size": size,
				role: "presentation",
				styles: inputStyles,
				children
			})
		}), validationState && !isLoading || isLoading || suffix ? /* @__PURE__ */ jsxs("div", {
			"data-element": "Suffix",
			children: [validationState && !isLoading || isLoading ? /* @__PURE__ */ jsx("div", {
				"data-element": "State",
				children: validationState && !isLoading ? validation : null
			}) : null, suffix]
		}) : null]
	});
}
const _DateInputBase = React.forwardRef(DateInputBase);
_DateInputBase.displayName = "DateInputBase";

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