/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d43332 | 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 { Space } from "../../layout/Space.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 { DatePickerButton } from "./DatePickerButton.js";
import { DatePickerInput } from "./DatePickerInput.js";
import { dateMessages } from "./intl.js";
import { _RangeCalendar } from "../../other/Calendar/RangeCalendar.js";
import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
import { forwardRef, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useDateRangePicker, useFocusRing } from "react-aria";
import { useDateRangePickerState } from "react-stately";

//#region src/components/fields/DatePicker/DateRangePicker.tsx
const DateRangeDash = tasty({
	"aria-hidden": "true",
	"data-qa": "DateRangeDash",
	children: "–",
	styles: { padding: "0 .5x" }
});
function DateRangePicker(props, ref) {
	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, shouldFlip, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus } = props;
	let targetRef = useRef(null);
	let state = useDateRangePickerState({
		...props,
		shouldCloseOnSelect: () => !state.hasTime
	});
	let { isOpen, setOpen } = state;
	let { isFocused, focusProps } = useFocusRing({
		within: true,
		isTextInput: true,
		autoFocus
	});
	let { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing({
		within: false,
		isTextInput: false,
		autoFocus
	});
	let domRef = useFocusManagerRef(ref);
	let { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps, calendarProps } = useDateRangePicker(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__ */ jsxs(_DateInputBase, {
		ref: targetRef,
		qa: qa || "DateRangePicker",
		inputType: "daterangepicker",
		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,
			onOpenChange: setOpen,
			children: [/* @__PURE__ */ jsx(DatePickerButton, {
				size,
				...mergeProps$1(buttonProps, focusPropsButton),
				isDisabled
			}), /* @__PURE__ */ jsxs(Dialog, {
				...dialogProps,
				width: "max-content",
				children: [/* @__PURE__ */ jsx(_RangeCalendar, { ...calendarProps }), showTimeField && /* @__PURE__ */ jsxs(Space, { children: [/* @__PURE__ */ jsx(_TimeInput, {
					padding: "1x",
					label: dateMessages["startTime"],
					value: state.timeRange?.start || null,
					placeholderValue: timePlaceholder,
					granularity: timeGranularity,
					minValue: timeMinValue,
					maxValue: timeMaxValue,
					hourCycle: props.hourCycle,
					hideTimeZone: props.hideTimeZone,
					onChange: (v) => state.setTime("start", v)
				}), /* @__PURE__ */ jsx(_TimeInput, {
					padding: "1x",
					label: dateMessages["endTime"],
					value: state.timeRange?.end || null,
					placeholderValue: timePlaceholder,
					granularity: timeGranularity,
					minValue: timeMinValue,
					maxValue: timeMaxValue,
					hourCycle: props.hourCycle,
					hideTimeZone: props.hideTimeZone,
					onChange: (v) => state.setTime("end", v)
				})] })]
			})]
		}),
		children: [
			/* @__PURE__ */ jsx(DatePickerInput, {
				useLocale: useLocaleProp,
				...startFieldProps
			}),
			/* @__PURE__ */ jsx(DateRangeDash, {}),
			/* @__PURE__ */ jsx(DatePickerInput, {
				useLocale: useLocaleProp,
				...endFieldProps
			})
		]
	}), domRef, {
		...props,
		labelProps: mergeProps$1(props.labelProps, labelProps)
	});
}
const _DateRangePicker = forwardRef(DateRangePicker);
_DateRangePicker.displayName = "DateRangePicker";

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