"use client";
import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { Avatar } from "./index15.js";
import { parseEventDate } from "./index57.js";
import { useCalendarContext } from "./index76.js";
import { Bell, Calendar, Clock, Copy, MapPin, Pencil, Trash2 } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { format } from "date-fns";
//#region src/components/molecules/data/Calendar/_shared/EventDetailPanel.tsx
var ATTENDEE_SOFT_COLORS = [
	"primary",
	"indigo",
	"purple",
	"success",
	"warning",
	"slate"
];
function getAttendeeSummary(attendees) {
	let yes = 0;
	let awaiting = 0;
	let no = 0;
	for (const a of attendees) if (a.status === "yes") yes++;
	else if (a.status === "no") no++;
	else awaiting++;
	const parts = [];
	if (yes > 0) parts.push(`${yes} yes`);
	if (awaiting > 0) parts.push(`${awaiting} awaiting`);
	if (no > 0) parts.push(`${no} no`);
	return parts.join(" · ");
}
function EventDetailPanel({ onEventCopy, onEventDelete, onEventEdit, className }) {
	const { events, selectedEventId } = useCalendarContext();
	const event = React.useMemo(() => events.find((e) => e.id === selectedEventId) ?? null, [events, selectedEventId]);
	if (!event) return null;
	const startDate = parseEventDate(event.start);
	const endDate = event.end ? parseEventDate(event.end) : null;
	const maxVisibleAvatars = 5;
	const attendees = event.attendees ?? [];
	const visibleAttendees = attendees.slice(0, maxVisibleAvatars);
	const avatarOverflow = attendees.length - maxVisibleAvatars;
	return /* @__PURE__ */ jsxs("section", {
		"data-slot": "event-detail-panel",
		"aria-label": "Event details",
		className: cn("flex flex-col gap-4 p-4", "animate-in fade-in slide-in-from-bottom-2 duration-200 motion-reduce:animate-none", className),
		children: [
			/* @__PURE__ */ jsxs("div", {
				className: "flex items-start justify-between gap-2",
				children: [/* @__PURE__ */ jsx("h3", {
					className: "text-base font-bold text-foreground",
					children: event.title
				}), /* @__PURE__ */ jsxs("div", {
					className: "flex shrink-0 items-center gap-1",
					children: [
						onEventCopy && /* @__PURE__ */ jsx(Button, {
							appearance: "outline",
							variant: "secondary",
							size: "icon-sm",
							"aria-label": "Copy event",
							onClick: () => onEventCopy(event),
							children: /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
						}),
						onEventDelete && /* @__PURE__ */ jsx(Button, {
							appearance: "outline",
							variant: "destructive",
							size: "icon-sm",
							"aria-label": "Delete event",
							onClick: () => onEventDelete(event),
							children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
						}),
						onEventEdit && /* @__PURE__ */ jsx(Button, {
							appearance: "outline",
							variant: "secondary",
							size: "icon-sm",
							"aria-label": "Edit event",
							onClick: () => onEventEdit(event),
							children: /* @__PURE__ */ jsx(Pencil, { className: "size-3.5" })
						})
					]
				})]
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-3",
				children: [
					/* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-2.5 text-sm text-muted-foreground",
						children: [/* @__PURE__ */ jsx(Calendar, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsx("span", { children: format(startDate, "EEEE, MMMM d, yyyy") })]
					}),
					/* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-2.5 text-sm text-muted-foreground",
						children: [/* @__PURE__ */ jsx(Clock, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsxs("span", { children: [format(startDate, "h:mm a"), endDate && ` \u2013 ${format(endDate, "h:mm a")}`] })]
					}),
					event.location && /* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-2.5 text-sm text-muted-foreground",
						children: [/* @__PURE__ */ jsx(MapPin, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsx("span", { children: event.location })]
					}),
					event.reminder && /* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-2.5 text-sm text-muted-foreground",
						children: [/* @__PURE__ */ jsx(Bell, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsx("span", { children: event.reminder })]
					})
				]
			}),
			attendees.length > 0 && /* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-2",
				children: [
					/* @__PURE__ */ jsx("span", {
						className: "text-xs font-medium text-muted-foreground",
						children: "Attendees"
					}),
					/* @__PURE__ */ jsx("div", {
						className: "flex items-center",
						children: /* @__PURE__ */ jsxs("div", {
							className: "flex -space-x-2",
							children: [visibleAttendees.map((attendee, i) => /* @__PURE__ */ jsx(Avatar, {
								size: "sm",
								src: attendee.avatar,
								fallback: attendee.name,
								softColor: ATTENDEE_SOFT_COLORS[i % ATTENDEE_SOFT_COLORS.length],
								className: "border-2 border-background"
							}, `${attendee.name}-${i}`)), avatarOverflow > 0 && /* @__PURE__ */ jsxs("div", {
								role: "img",
								"aria-label": `${avatarOverflow} more attendees`,
								className: "flex size-8 items-center justify-center rounded-full border-2 border-background bg-muted text-xs font-semibold text-muted-foreground",
								children: ["+", avatarOverflow]
							})]
						})
					}),
					/* @__PURE__ */ jsx("span", {
						className: "text-xs text-muted-foreground",
						children: getAttendeeSummary(attendees)
					})
				]
			}),
			event.description && /* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-1.5 border-t border-border pt-4",
				children: [/* @__PURE__ */ jsx("span", {
					className: "text-xs font-medium text-muted-foreground",
					children: "About this event"
				}), /* @__PURE__ */ jsx("p", {
					className: "text-sm leading-relaxed text-foreground",
					children: event.description
				})]
			})
		]
	}, event.id);
}
EventDetailPanel.displayName = "EventDetailPanel";
//#endregion
export { EventDetailPanel };

//# sourceMappingURL=index64.js.map