"use client";
import { cn } from "./index3.js";
import { buildCalendarGrid, getDateKey, parseEventDate } from "./index57.js";
import { ARROW_OFFSETS, DAY_LETTERS_MONDAY, DAY_LETTERS_SUNDAY, DAY_NAMES_MONDAY, DAY_NAMES_SUNDAY, FOCUS_RING, TOUCH_TARGET_44 } from "./index58.js";
import { EVENT_DOT_COLORS } from "./index59.js";
import { EventPill } from "./index65.js";
import { useCalendarContext } from "./index76.js";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { addDays, format, isSameDay, isSameMonth, isToday, isWeekend } from "date-fns";
//#region src/components/molecules/data/Calendar/MonthView.tsx
var EMPTY_EVENTS = [];
function MonthView({ onEventClick, onMoreEventsClick, maxEventsPerCell = 2 }) {
	const { events, selectedDate, weekStartsOn, onDateSelect } = useCalendarContext();
	const weeks = React.useMemo(() => buildCalendarGrid(selectedDate, weekStartsOn), [selectedDate, weekStartsOn]);
	const dayNames = weekStartsOn === 0 ? DAY_NAMES_SUNDAY : DAY_NAMES_MONDAY;
	const dayLetters = weekStartsOn === 0 ? DAY_LETTERS_SUNDAY : DAY_LETTERS_MONDAY;
	const eventsByDate = React.useMemo(() => {
		const map = /* @__PURE__ */ new Map();
		for (const event of events) {
			const key = getDateKey(parseEventDate(event.start));
			const list = map.get(key);
			if (list) list.push(event);
			else map.set(key, [event]);
		}
		return map;
	}, [events]);
	const getEventsForDay = (date) => eventsByDate.get(getDateKey(date)) ?? EMPTY_EVENTS;
	const gridRef = React.useRef(null);
	return /* @__PURE__ */ jsxs("div", {
		ref: gridRef,
		role: "grid",
		"aria-label": "Calendar",
		"data-slot": "month-view",
		className: "flex flex-col",
		children: [/* @__PURE__ */ jsx("div", {
			role: "row",
			className: "grid grid-cols-7",
			children: dayNames.map((name, i) => {
				return /* @__PURE__ */ jsxs("div", {
					role: "columnheader",
					className: cn("border-b border-border px-3 py-2 text-center text-xs font-medium text-muted-foreground", (weekStartsOn === 1 && i >= 5 || weekStartsOn === 0 && (i === 0 || i === 6)) && "bg-surface-1"),
					children: [/* @__PURE__ */ jsx("span", {
						className: "hidden @[640px]:inline",
						children: name
					}), /* @__PURE__ */ jsx("span", {
						className: "@[640px]:hidden",
						children: dayLetters[i]
					})]
				}, name);
			})
		}), weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", {
			role: "row",
			className: "grid grid-cols-7 border-b border-border last:border-b-0",
			children: week.map((dayDate) => {
				const dayEvents = getEventsForDay(dayDate);
				const isCurrentMonth = isSameMonth(dayDate, selectedDate);
				const isSelected = isSameDay(dayDate, selectedDate);
				const isTodayDate = isToday(dayDate);
				const isWeekendDay = isWeekend(dayDate);
				const visibleEvents = dayEvents.slice(0, maxEventsPerCell);
				const overflowCount = dayEvents.length - maxEventsPerCell;
				return /* @__PURE__ */ jsxs("div", {
					role: "gridcell",
					"aria-selected": isSelected || void 0,
					tabIndex: -1,
					className: cn("min-h-28 border-e border-border p-2 last:border-e-0", isWeekendDay && "bg-surface-1", !isCurrentMonth && "bg-secondary"),
					children: [
						/* @__PURE__ */ jsx("div", {
							className: "mb-1",
							children: /* @__PURE__ */ jsx("button", {
								type: "button",
								onClick: () => onDateSelect(dayDate),
								"aria-label": `Select ${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-9 items-center justify-center rounded-sm text-sm font-medium transition-colors duration-200 motion-reduce:transition-none", TOUCH_TARGET_44, FOCUS_RING, isTodayDate && `bg-primary text-primary-foreground shadow-[0_0_0_2px_hsl(var(--primary)/0.2)]`, isSelected && !isTodayDate && "bg-primary/10 text-primary", !isTodayDate && !isSelected && isCurrentMonth && "text-foreground hover:bg-accent", !isCurrentMonth && "text-muted-foreground"),
								children: format(dayDate, "d")
							})
						}),
						/* @__PURE__ */ jsxs("div", {
							className: "hidden @[640px]:flex flex-col gap-0.5",
							children: [visibleEvents.map((event) => /* @__PURE__ */ jsx(EventPill, {
								event,
								onClick: onEventClick,
								className: cn(!isCurrentMonth && "opacity-60")
							}, event.id)), overflowCount > 0 && /* @__PURE__ */ jsxs("button", {
								type: "button",
								"aria-label": `${overflowCount} more events on ${format(dayDate, "MMMM d")}`,
								onClick: (e) => {
									e.stopPropagation();
									onMoreEventsClick?.(dayDate, dayEvents);
								},
								className: cn("relative min-h-[44px] text-start text-xs font-medium text-primary transition-colors hover:text-primary/80", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"),
								children: [overflowCount, " more.."]
							})]
						}),
						dayEvents.length > 0 && /* @__PURE__ */ jsx("button", {
							type: "button",
							"aria-label": `${dayEvents.length} event${dayEvents.length > 1 ? "s" : ""}`,
							onClick: (e) => {
								e.stopPropagation();
								if (dayEvents.length === 1) onEventClick?.(dayEvents[0]);
								else onMoreEventsClick?.(dayDate, dayEvents);
							},
							className: cn("flex min-h-[44px] min-w-[44px] items-center @[640px]:hidden", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"),
							children: /* @__PURE__ */ jsx("span", {
								className: "flex flex-wrap gap-1",
								children: dayEvents.slice(0, 4).map((event) => /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", EVENT_DOT_COLORS[event.color ?? "brand"], !isCurrentMonth && "opacity-60") }, event.id))
							})
						})
					]
				}, dayDate.toISOString());
			})
		}, weekIndex))]
	});
}
MonthView.displayName = "MonthView";
//#endregion
export { MonthView };

//# sourceMappingURL=index69.js.map