/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d4ad2ea | Cube Dev Team */
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { DatePickerSegment } from "./DatePickerSegment.js";
import { formatSegments } from "./utils.js";
import { tasty } from "@tenphi/tasty";
import { useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { useDateField, useFocusWithin, useLocale } from "react-aria";
import { useDateFieldState } from "react-stately";
import { createCalendar } from "@internationalized/date";

//#region src/components/fields/DatePicker/DatePickerInput.tsx
const DateInputElement = tasty({
	role: "presentation",
	styles: {
		display: "flex",
		flow: "row",
		placeItems: "center start"
	}
});
function DatePickerInput(props) {
	let { isDisabled, isReadOnly, isRequired, useLocale: useLocaleProp } = props;
	let ref = useRef(null);
	let { locale } = useLocale();
	let state = useDateFieldState({
		...props,
		locale: useLocaleProp ? locale : "en-US",
		createCalendar
	});
	if (useLocaleProp == null) state.segments = formatSegments(state.segments);
	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: (isFocused) => {
		if (isFocused) props.onFocus?.();
		else props.onBlur?.();
	} });
	let { fieldProps } = useDateField(props, state, ref);
	return /* @__PURE__ */ jsx(DateInputElement, {
		ref,
		...mergeProps$1(fieldProps, focusWithinProps),
		children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DatePickerSegment, {
			segment,
			state,
			isDisabled,
			isReadOnly,
			isRequired
		}, i))
	});
}

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