"use client";
import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { buildCalendarGrid, parseEventDate } from "./index57.js";
import { ARROW_OFFSETS, DAY_FULL_MONDAY, DAY_FULL_SUNDAY, DAY_LETTERS_MONDAY, DAY_LETTERS_SUNDAY, FOCUS_RING, TOUCH_TARGET_44 } from "./index58.js";
import { EventPill } from "./index65.js";
import { useCalendarContext } from "./index76.js";
import { ChevronLeft, ChevronRight } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { addDays, addMonths, format, isSameDay, isSameMonth, isToday, startOfMonth, subMonths } from "date-fns";
//#region src/components/molecules/data/Calendar/_shared/MiniMonthCalendar.tsx
function MiniMonthCalendar({ className }) {
	const { events, selectedDate, weekStartsOn, onDateSelect } = useCalendarContext();
	const [displayMonth, setDisplayMonth] = React.useState(startOfMonth(selectedDate));
	React.useEffect(() => {
		const newMonth = startOfMonth(selectedDate);
		setDisplayMonth((prev) => prev.getTime() === newMonth.getTime() ? prev : newMonth);
	}, [selectedDate]);
	const weeks = React.useMemo(() => buildCalendarGrid(displayMonth, weekStartsOn), [displayMonth, weekStartsOn]);
	const dayLetters = weekStartsOn === 0 ? DAY_LETTERS_SUNDAY : DAY_LETTERS_MONDAY;
	const dayFull = weekStartsOn === 0 ? DAY_FULL_SUNDAY : DAY_FULL_MONDAY;
	const gridRef = React.useRef(null);
	const selectedDayEvents = React.useMemo(() => events.filter((e) => isSameDay(parseEventDate(e.start), selectedDate)), [events, selectedDate]);
	const maxVisibleEvents = 3;
	const visibleEvents = selectedDayEvents.slice(0, maxVisibleEvents);
	const overflowCount = selectedDayEvents.length - maxVisibleEvents;
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "mini-month-calendar",
		className: cn("p-4", className),
		children: [
			/* @__PURE__ */ jsxs("div", {
				className: "mb-3 flex items-center justify-between",
				children: [/* @__PURE__ */ jsx("span", {
					className: "text-sm font-semibold text-foreground",
					children: format(displayMonth, "MMMM yyyy")
				}), /* @__PURE__ */ jsxs("div", {
					className: "flex items-center gap-1",
					children: [/* @__PURE__ */ jsx(Button, {
						appearance: "ghost",
						variant: "secondary",
						size: "icon-xs",
						"aria-label": "Previous month",
						onClick: () => setDisplayMonth(subMonths(displayMonth, 1)),
						children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" })
					}), /* @__PURE__ */ jsx(Button, {
						appearance: "ghost",
						variant: "secondary",
						size: "icon-xs",
						"aria-label": "Next month",
						onClick: () => setDisplayMonth(addMonths(displayMonth, 1)),
						children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" })
					})]
				})]
			}),
			/* @__PURE__ */ jsxs("div", {
				ref: gridRef,
				role: "grid",
				"aria-label": "Mini month calendar",
				children: [/* @__PURE__ */ jsx("div", {
					role: "row",
					className: "mb-1 grid grid-cols-7",
					children: dayLetters.map((letter, i) => /* @__PURE__ */ jsx("div", {
						role: "columnheader",
						"aria-label": dayFull[i],
						className: "flex items-center justify-center py-1 text-[10px] font-medium text-muted-foreground",
						children: letter
					}, `${letter}-${i}`))
				}), weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", {
					role: "row",
					className: "grid grid-cols-7",
					children: week.map((dayDate) => {
						const isCurrentMonth = isSameMonth(dayDate, displayMonth);
						const isSelected = isSameDay(dayDate, selectedDate);
						const isTodayDate = isToday(dayDate);
						return /* @__PURE__ */ jsx("div", {
							role: "gridcell",
							"aria-selected": isSelected || void 0,
							children: /* @__PURE__ */ jsx("button", {
								type: "button",
								onClick: () => onDateSelect(dayDate),
								"aria-label": format(dayDate, "MMMM d, yyyy"),
								"aria-current": isTodayDate ? "date" : void 0,
								"data-date": dayDate.toISOString(),
								tabIndex: isSameDay(dayDate, selectedDate) ? 0 : -1,
								onKeyDown: (e) => {
									const offset = ARROW_OFFSETS[e.key];
									if (offset !== void 0) {
										e.preventDefault();
										const newDate = addDays(dayDate, offset);
										const target = gridRef.current?.querySelector(`[data-date="${newDate.toISOString()}"]`);
										if (target) target.focus();
										else onDateSelect(newDate);
									}
								},
								className: cn("relative flex size-7 items-center justify-center text-xs transition-colors duration-200 motion-reduce:transition-none", TOUCH_TARGET_44, FOCUS_RING, isSelected && "rounded-sm bg-primary text-primary-foreground shadow-sm", !isSelected && isTodayDate && "rounded-sm bg-primary/10 text-primary font-semibold ring-1 ring-primary/30", !isSelected && !isTodayDate && isCurrentMonth && "text-foreground hover:bg-accent", !isCurrentMonth && "text-muted-foreground/50"),
								children: format(dayDate, "d")
							})
						}, dayDate.toISOString());
					})
				}, weekIndex))]
			}),
			selectedDayEvents.length > 0 && /* @__PURE__ */ jsxs("div", {
				className: "mt-4 flex flex-col gap-1 border-t border-border pt-3",
				children: [
					/* @__PURE__ */ jsx("span", {
						className: "mb-1 text-xs font-medium text-muted-foreground",
						children: format(selectedDate, "EEEE, MMM d")
					}),
					visibleEvents.map((event, i) => /* @__PURE__ */ jsx(EventPill, {
						event,
						className: "animate-in fade-in slide-in-from-bottom-1 duration-200 fill-mode-backwards motion-reduce:animate-none",
						style: { animationDelay: `${i * 50}ms` }
					}, event.id)),
					overflowCount > 0 && /* @__PURE__ */ jsxs("span", {
						className: "text-xs text-muted-foreground",
						children: [
							"+",
							overflowCount,
							" more"
						]
					})
				]
			})
		]
	});
}
MiniMonthCalendar.displayName = "MiniMonthCalendar";
//#endregion
export { MiniMonthCalendar };

//# sourceMappingURL=index66.js.map