/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { useProviderProps } from "../../../provider.js";
import { useFormProps } from "../../form/Form/Form.js";
import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
import { wrapWithField } from "../../form/wrapper.js";
import { _DateInputBase } from "./DateInputBase.js";
import { DatePickerSegment } from "./DatePickerSegment.js";
import { DEFAULT_DATE_PROPS } from "./props.js";
import { formatSegments, useFocusManagerRef } from "./utils.js";
import { parseAbsoluteDate } from "./parseDate.js";
import { CONTAINER_STYLES } from "@tenphi/tasty";
import { forwardRef, useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { useDateField, useLocale } from "react-aria";
import { useDateFieldState } from "react-stately";
import { createCalendar } from "@internationalized/date";

//#region src/components/fields/DatePicker/DateInput.tsx
function DateInput(props, ref) {
	props = useProviderProps(props);
	props = useFormProps(props);
	props = useFieldProps(props, {
		defaultValidationTrigger: "onBlur",
		valuePropsMapper: ({ value, onChange }) => ({
			value: typeof value === "string" ? parseAbsoluteDate(value) : value,
			onChange
		})
	});
	props = Object.assign({}, DEFAULT_DATE_PROPS, props);
	let { qa, autoFocus, isDisabled, inputStyles, wrapperStyles, isReadOnly, isRequired, size = "medium", useLocale: useLocaleProp } = props;
	extractStyles(props, CONTAINER_STYLES, wrapperStyles);
	let domRef = useFocusManagerRef(ref);
	let { locale } = useLocale();
	let state = useDateFieldState({
		...props,
		locale: useLocaleProp ? locale : "en-US",
		createCalendar
	});
	if (useLocaleProp == null) state.segments = formatSegments(state.segments);
	let fieldRef = useRef(null);
	let { labelProps, fieldProps } = useDateField(props, state, fieldRef);
	return wrapWithField(/* @__PURE__ */ jsx(_DateInputBase, {
		ref: fieldRef,
		qa: qa || "DateInput",
		inputType: "dateinput",
		size,
		fieldProps,
		isDisabled,
		autoFocus,
		validationState: state.validationState,
		styles: wrapperStyles,
		inputStyles,
		children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DatePickerSegment, {
			segment,
			state,
			isDisabled,
			isReadOnly,
			isRequired
		}, i))
	}), domRef, {
		...props,
		labelProps: mergeProps$1(props.labelProps, labelProps)
	});
}
/**
* DateInputs allow users to enter and edit date and time values using a keyboard.
* Each part of a date value is displayed in an individually editable segment.
*/
const _DateInput = forwardRef(DateInput);
_DateInput.displayName = "DateInput";

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