/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a795c5b | 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 { 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 { 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 { dateMessages } from "./intl.js";
import { DatePickerElement } from "./DatePickerElement.js";
import { forwardRef, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useDatePicker, useDateRangePicker, useFocusRing } from "react-aria";
import { useDatePickerState, useDateRangePickerState } from "react-stately";

//#region src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx
const DateRangeDash = tasty({
	"aria-hidden": "true",
	"data-qa": "DateRangeDash",
	children: "–",
	styles: {
		padding: "0 .5x",
		color: "#dark-03"
	}
});
function DateRangeSeparatedPicker(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, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus } = props;
	let targetRef = useRef(null);
	let state = useDateRangePickerState({ ...props });
	let startState = useDatePickerState({
		...props,
		onChange: null,
		value: state.value?.start
	});
	let endState = useDatePickerState({
		...props,
		onChange: null,
		value: state.value?.end
	});
	let startFocusRingProps = useFocusRing({
		within: true,
		isTextInput: true,
		autoFocus
	});
	let startFocusProps = useFocusRing({
		within: false,
		isTextInput: false,
		autoFocus
	});
	let endFocusRingProps = useFocusRing({
		within: true,
		isTextInput: true,
		autoFocus
	});
	let endFocusProps = useFocusRing({
		within: false,
		isTextInput: false,
		autoFocus
	});
	let domRef = useFocusManagerRef(ref);
	let { groupProps, labelProps, startFieldProps, endFieldProps } = useDateRangePicker(props, state, targetRef);
	let startProps = useDatePicker(props, startState, targetRef);
	let endProps = useDatePicker(props, endState, 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;
	function onChange(value, type) {
		if (type === "start") {
			const newRange = {
				...state.value,
				start: value
			};
			if (newRange.start && newRange.end && newRange.end.compare(newRange.start) < 0) newRange.end = newRange.start;
			state.setValue(newRange);
			startProps.calendarProps.onChange(value);
			startState.setOpen(false);
		} else {
			const newRange = {
				...state.value,
				end: value
			};
			if (newRange.start && newRange.end && newRange.end.compare(newRange.start) < 0) newRange.start = newRange.end;
			state.setValue(newRange);
			endProps.calendarProps.onChange(value);
			endState.setOpen(false);
		}
	}
	return wrapWithField(/* @__PURE__ */ jsxs(DatePickerElement, {
		ref: targetRef,
		...groupProps,
		styles: props.wrapperStyles,
		qa: qa || "DateRangeSeparatedPicker",
		"data-input-type": "daterangeseparatedpicker",
		children: [
			/* @__PURE__ */ jsx(_DateInputBase, {
				disableFocusRing: startFocusProps.isFocused,
				isDisabled,
				validationState,
				size,
				...startFocusRingProps.focusProps,
				suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
					hideArrow: true,
					type: "popover",
					mobileType: "tray",
					placement: "bottom right",
					targetRef,
					isOpen: startState.isOpen,
					shouldFlip: props.shouldFlip,
					onOpenChange: startState.setOpen,
					children: [/* @__PURE__ */ jsx(DatePickerButton, {
						size,
						...mergeProps$1(startProps.buttonProps, startFocusProps.focusProps),
						isDisabled
					}), /* @__PURE__ */ jsxs(Dialog, {
						...startProps.dialogProps,
						width: "max-content",
						children: [/* @__PURE__ */ jsx(_Calendar, {
							...startProps.calendarProps,
							defaultFocusedValue: state.value?.start || state.value?.end || void 0,
							selectedRange: state.value?.start && state.value?.end ? state.value : void 0,
							onChange: (value) => onChange(value, "start")
						}), showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
							padding: "1x",
							label: dateMessages["time"],
							value: startState.timeValue,
							placeholderValue: timePlaceholder,
							granularity: timeGranularity,
							minValue: timeMinValue,
							maxValue: timeMaxValue,
							hourCycle: props.hourCycle,
							hideTimeZone: props.hideTimeZone,
							onChange: startState.setTimeValue
						})]
					})]
				}),
				children: /* @__PURE__ */ jsx(DatePickerInput, {
					useLocale: useLocaleProp,
					...startFieldProps
				})
			}),
			/* @__PURE__ */ jsx(DateRangeDash, {}),
			/* @__PURE__ */ jsx(_DateInputBase, {
				disableFocusRing: endFocusProps.isFocused,
				isDisabled,
				validationState,
				size,
				...endFocusRingProps.focusProps,
				suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
					hideArrow: true,
					type: "popover",
					mobileType: "tray",
					placement: "bottom right",
					targetRef,
					isOpen: endState.isOpen,
					shouldFlip: props.shouldFlip,
					onOpenChange: endState.setOpen,
					children: [/* @__PURE__ */ jsx(DatePickerButton, {
						"aria-label": "Show calendar for the end date",
						size,
						...mergeProps$1(endFocusProps.focusProps, endProps.buttonProps),
						isDisabled
					}), /* @__PURE__ */ jsxs(Dialog, {
						...endProps.dialogProps,
						width: "max-content",
						children: [/* @__PURE__ */ jsx(_Calendar, {
							...endProps.calendarProps,
							defaultFocusedValue: state.value?.end || state.value?.start || void 0,
							selectedRange: state.value?.start && state.value?.end ? state.value : void 0,
							onChange: (value) => {
								onChange(value, "end");
							}
						}), showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
							padding: "1x",
							label: dateMessages["time"],
							value: endState.timeValue,
							placeholderValue: timePlaceholder,
							granularity: timeGranularity,
							minValue: timeMinValue,
							maxValue: timeMaxValue,
							hourCycle: props.hourCycle,
							hideTimeZone: props.hideTimeZone,
							onChange: endState.setTimeValue
						})]
					})]
				}),
				children: /* @__PURE__ */ jsx(DatePickerInput, {
					useLocale: useLocaleProp,
					...endFieldProps
				})
			})
		]
	}), domRef, {
		...props,
		labelProps: mergeProps$1(props.labelProps, labelProps)
	});
}
const _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker);
_DateRangeSeparatedPicker.displayName = "DateRangeSeparatedPicker";

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