/** @license MIT | @cube-dev/ui-kit v0.147.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 { useI18n } from "../../../i18n/useI18n.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 { Dialog } from "../../overlays/Dialog/Dialog.js";
import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
import { _DateInputBase } from "./DateInputBase.js";
import { DEFAULT_DATE_PROPS } from "./props.js";
import { useFocusManagerRef } from "./utils.js";
import { _TimeInput } from "./TimeInput.js";
import { _Calendar } from "../../other/Calendar/Calendar.js";
import { DatePickerButton } from "./DatePickerButton.js";
import { DatePickerInput } from "./DatePickerInput.js";
import { CONTAINER_STYLES } from "@tenphi/tasty";
import { forwardRef, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useDatePicker, useFocusRing } from "react-aria";
import { useDatePickerState } from "react-stately";

//#region src/components/fields/DatePicker/DatePicker.tsx
function DatePicker(props, ref) {
	const { t } = useI18n();
	props = useProviderProps(props);
	props = useFormProps(props);
	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
	props = Object.assign({}, DEFAULT_DATE_PROPS, props);
	extractStyles(props, CONTAINER_STYLES);
	let { qa, size, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus } = props;
	let targetRef = useRef(null);
	let state = useDatePickerState({
		...props,
		shouldCloseOnSelect: () => !state.hasTime
	});
	let { isOpen, setOpen } = state;
	let domRef = useFocusManagerRef(ref);
	let { isFocused, focusProps } = useFocusRing({
		within: true,
		isTextInput: true,
		autoFocus
	});
	let { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing({
		within: false,
		isTextInput: false,
		autoFocus
	});
	let { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps } = useDatePicker(props, state, targetRef);
	let placeholder = placeholderValue;
	let timePlaceholder = placeholder && "hour" in placeholder ? placeholder : void 0;
	let timeMinValue = props.minValue && "hour" in props.minValue ? props.minValue : void 0;
	let timeMaxValue = props.maxValue && "hour" in props.maxValue ? props.maxValue : void 0;
	let timeGranularity = state.granularity === "hour" || state.granularity === "minute" || state.granularity === "second" ? state.granularity : null;
	let showTimeField = !!timeGranularity;
	return wrapWithField(/* @__PURE__ */ jsx(_DateInputBase, {
		ref: targetRef,
		qa: qa || "DatePicker",
		inputType: "datepicker",
		styles: props.wrapperStyles,
		disableFocusRing: isFocusedButton,
		isDisabled,
		validationState,
		size,
		fieldProps: groupProps,
		...focusProps,
		suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
			hideArrow: true,
			type: "popover",
			mobileType: "tray",
			placement: "bottom right",
			targetRef,
			isOpen,
			shouldFlip: props.shouldFlip,
			onOpenChange: setOpen,
			children: [/* @__PURE__ */ jsx(DatePickerButton, {
				size,
				...mergeProps$1(buttonProps, focusPropsButton),
				isDisabled
			}), /* @__PURE__ */ jsxs(Dialog, {
				...dialogProps,
				width: "max-content",
				children: [/* @__PURE__ */ jsx(_Calendar, { ...calendarProps }), showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
					padding: "1x",
					label: t("datePicker.time", "Time"),
					value: state.timeValue,
					placeholderValue: timePlaceholder,
					granularity: timeGranularity,
					minValue: timeMinValue,
					maxValue: timeMaxValue,
					hourCycle: props.hourCycle,
					hideTimeZone: props.hideTimeZone,
					onChange: state.setTimeValue
				})]
			})]
		}),
		children: /* @__PURE__ */ jsx(DatePickerInput, {
			useLocale: useLocaleProp,
			...fieldProps
		})
	}), domRef, {
		...props,
		labelProps: mergeProps$1(props.labelProps, labelProps)
	});
}
const _DatePicker = forwardRef(DatePicker);
_DatePicker.displayName = "DatePicker";

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