const require_chunk = require("./chunk-CKQMccvm.cjs");
const require_useMultipleRefs = require("./useMultipleRefs-mSvva-CV.cjs");
const require_LayoutContext = require("./LayoutContext-DeKRR6ld.cjs");
const require_components_Select_index = require("./components/Select/index.cjs");
let clsx = require("clsx");
clsx = require_chunk.__toESM(clsx);
let react = require("react");
react = require_chunk.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
let react_day_picker = require("react-day-picker");
let _radix_ui_react_select = require("@radix-ui/react-select");
_radix_ui_react_select = require_chunk.__toESM(_radix_ui_react_select);
let lodash_es_debounce = require("lodash-es/debounce");
lodash_es_debounce = require_chunk.__toESM(lodash_es_debounce);
//#region src/components/Calendar/utils/helperFn.tsx
const getMonthName = (monthNumber) => {
	switch (monthNumber) {
		case 0: return "January";
		case 1: return "February";
		case 2: return "March";
		case 3: return "April";
		case 4: return "May";
		case 5: return "June";
		case 6: return "July";
		case 7: return "August";
		case 8: return "September";
		case 9: return "October";
		case 10: return "November";
		case 11: return "December";
		default: return "Invalid Month";
	}
};
const getMonthNumber = (monthName) => {
	switch (monthName) {
		case "January": return 0;
		case "February": return 1;
		case "March": return 2;
		case "April": return 3;
		case "May": return 4;
		case "June": return 5;
		case "July": return 6;
		case "August": return 7;
		case "September": return 8;
		case "October": return 9;
		case "November": return 10;
		case "December": return 11;
		default: return -1;
	}
};
//#endregion
//#region src/components/Calendar/components/helperComponents.tsx
const SelectContent = (0, react.forwardRef)(({ className, children, position = "popper", viewportClassName, container, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Portal, {
	container: container || document.body,
	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Content, {
		ref,
		className: (0, clsx.default)("openui-select-content", className),
		position,
		...props,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Viewport, {
			className: (0, clsx.default)("openui-select-viewport", viewportClassName),
			"data-position": position,
			children
		})
	})
}));
const MonthsDropdown = (props) => {
	const { className, disabled, onChange, options, value, key, "aria-label": ariaLabel, container } = props;
	const [containerWidth, setContainerWidth] = (0, react.useState)(0);
	const [containerHeight, setContainerHeight] = (0, react.useState)(0);
	(0, react.useEffect)(() => {
		if (!container) return;
		const targetElement = container.children[0]?.children[0];
		if (!targetElement) return;
		const resizeObserver = new ResizeObserver((0, lodash_es_debounce.default)((entries) => {
			const { width, height } = entries[0]?.contentRect || {};
			setContainerWidth(width || 0);
			setContainerHeight(height || 0);
		}, 100));
		resizeObserver.observe(targetElement);
		return () => {
			resizeObserver.disconnect();
		};
	}, [container]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Select_index.Select, {
		onValueChange: (value) => onChange?.({ target: { value: getMonthNumber(value) } }),
		value: getMonthName(Number(value)),
		disabled,
		"aria-label": ariaLabel,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectTrigger, {
			className: (0, clsx.default)("openui-calendar-select-trigger", className),
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectValue, { placeholder: "Select a month" })
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectContent, {
			container,
			className: "openui-calendar-select-content-months",
			sideOffset: 4,
			alignOffset: 0,
			style: {
				maxHeight: `${containerHeight - 45}px`,
				minWidth: `${containerWidth}px`
			},
			children: options?.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectItem, {
				value: getMonthName(option.value),
				disabled: option.disabled,
				children: option.label
			}, option.value))
		})]
	}, key);
};
const YearsDropdown = (props) => {
	const { className, disabled, onChange, options, value, key, "aria-label": ariaLabel, container, botType } = props;
	const [containerHeight, setContainerHeight] = (0, react.useState)(0);
	(0, react.useEffect)(() => {
		if (!container) return;
		const targetElement = container.children[0]?.children[0];
		if (!targetElement) return;
		const resizeObserver = new ResizeObserver((0, lodash_es_debounce.default)((entries) => {
			const { height } = entries[0]?.contentRect || {};
			setContainerHeight(height || 0);
		}, 100));
		resizeObserver.observe(targetElement);
		return () => {
			resizeObserver.disconnect();
		};
	}, [container]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Select_index.Select, {
		onValueChange: (value) => onChange?.({ target: { value: Number(value) } }),
		value: String(value),
		disabled,
		"aria-label": ariaLabel,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectTrigger, {
			className: (0, clsx.default)("openui-calendar-select-trigger", className),
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectValue, { placeholder: "Select a month" })
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectContent, {
			container,
			className: "openui-calendar-select-content-years",
			viewportClassName: (0, clsx.default)("openui-calendar-select-viewport", botType === "mobile" && "openui-calendar-select-viewport-mobile"),
			sideOffset: 4,
			alignOffset: -75,
			style: {
				minHeight: `${containerHeight - 45}px`,
				maxHeight: `${containerHeight - 45}px`
			},
			children: options?.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectItem, {
				value: String(option.value),
				disabled: option.disabled,
				showTick: false,
				className: "openui-calendar-select-item",
				children: option.label
			}, option.value))
		})]
	}, key);
};
//#endregion
//#region src/components/Calendar/utils/styles.tsx
const getDayPickerStyles = (botType) => {
	const defaultClassNames = (0, react_day_picker.getDefaultClassNames)();
	const commonClassNames = {
		root: `${defaultClassNames.root} openui-calendar-root`,
		nav: `${defaultClassNames.nav} ${{
			mobile: "openui-calendar-nav-mobile",
			fullscreen: "openui-calendar-nav-fullscreen",
			tray: "openui-calendar-nav-tray",
			copilot: "openui-calendar-nav-copilot"
		}[botType]}`,
		dropdowns: `${defaultClassNames.dropdowns} ${{
			mobile: "openui-calendar-dropdowns-mobile",
			fullscreen: "openui-calendar-dropdowns-fullscreen",
			tray: "openui-calendar-dropdowns-tray",
			copilot: "openui-calendar-dropdowns-copilot"
		}[botType]}`,
		month_caption: `openui-calendar-month-caption`,
		month_grid: `openui-calendar-month-grid`,
		button_next: `openui-calendar-button-next `,
		button_previous: `openui-calendar-button-previous `,
		today: `openui-calendar-today`,
		disabled: `openui-calendar-disabled`,
		weekdays: `openui-calendar-weekdays`,
		weekday: `openui-calendar-weekday`,
		chevron: `openui-calendar-chevron`,
		month: `openui-calendar-month`,
		months_dropdown: `openui-calendar-months-dropdown`,
		years_dropdown: `openui-calendar-years-dropdown`,
		footer: `openui-calendar-footer`
	};
	return {
		DateSingleClasses: {
			...commonClassNames,
			day_button: "openui-calendar-single-day-button",
			day: "openui-calendar-single-day",
			selected: "openui-calendar-single-day-selected"
		},
		DateRangeClasses: {
			...commonClassNames,
			selected: "",
			range_start: "openui-calendar-range-start",
			range_middle: "openui-calendar-range-middle",
			range_end: "openui-calendar-range-end",
			day_button: "openui-calendar-range-day-button",
			day: "openui-calendar-range-day"
		}
	};
};
//#endregion
//#region src/components/Calendar/Calendar.tsx
const Calendar = (0, react.forwardRef)(({ className, classNames, ...props }, ref) => {
	const { layout } = require_LayoutContext.useLayoutContext();
	const { DateSingleClasses, DateRangeClasses } = getDayPickerStyles(layout);
	const containerRef = (0, react.useRef)(null);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		ref: require_useMultipleRefs.useMultipleRefs(ref, containerRef),
		className: (0, clsx.default)("openui-calendar-container", className),
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.DayPicker, {
			captionLayout: "dropdown",
			components: {
				MonthsDropdown: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthsDropdown, {
					...props,
					container: containerRef.current
				}),
				YearsDropdown: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(YearsDropdown, {
					...props,
					container: containerRef.current
				})
			},
			...props,
			classNames: {
				...props.mode === "single" || props.mode === "multiple" ? DateSingleClasses : DateRangeClasses,
				...classNames
			}
		})
	});
});
//#endregion
Object.defineProperty(exports, "Calendar", {
	enumerable: true,
	get: function() {
		return Calendar;
	}
});

//# sourceMappingURL=Calendar-D3jI423u.cjs.map