月間カレンダーEventCalendarExperimental

import * as React from "react";
import {
  EventCalendar,
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  type CalendarEvent,
} from "@gunjo/ui";

type CalendarSelection =
  | { type: "date"; iso: string; events: CalendarEvent[] }
  | { type: "event"; iso: string; event: CalendarEvent };

function eventDateIso(date: CalendarEvent["date"]) {
  if (date instanceof Date) {
    const year = String(date.getFullYear());
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return year + "-" + month + "-" + day;
  }
  return date;
}

const events: CalendarEvent[] = [
  { id: "a1", date: "2026-06-03", label: "特集: 夏の旅", tone: "info", ariaLabel: "特集 夏の旅" },
  {
    id: "a2",
    date: "2026-06-10",
    label: "撮影: 商品A",
    tone: "success",
    ariaLabel: "撮影 商品A",
  },
  { id: "a3", date: "2026-06-15", label: "編集会議", tone: "muted", ariaLabel: "編集会議" },
  {
    id: "a4",
    date: "2026-06-15",
    label: "入稿締切: 連載#12",
    tone: "destructive",
    ariaLabel: "入稿締切 連載12",
  },
  { id: "a5", date: "2026-06-15", label: "校了確認", tone: "warning", ariaLabel: "校了確認" },
  { id: "a6", date: "2026-06-15", label: "公開予約", tone: "primary", ariaLabel: "公開予約" },
  {
    id: "a7",
    date: "2026-06-24",
    label: "公開: GunjoUI 解説",
    tone: "primary",
    ariaLabel: "公開 GunjoUI 解説",
  },
];

export function EditorialCalendar() {
  const rootRef = React.useRef<HTMLDivElement>(null);
  const [portalContainer, setPortalContainer] = React.useState<HTMLElement | null>(null);
  const [month, setMonth] = React.useState(new Date(2026, 5, 1));
  const [selection, setSelection] = React.useState<CalendarSelection | null>(null);

  React.useEffect(() => {
    setPortalContainer(rootRef.current?.closest<HTMLElement>("[data-doc-component-preview-surface]") ?? rootRef.current);
  }, []);

  return (
    <div ref={rootRef} className="relative flex w-full max-w-3xl flex-col gap-4">
      <EventCalendar
        month={month}
        events={events}
        today="2026-06-24"
        label="編集カレンダー"
        weekdayLabels={["日", "月", "火", "水", "木", "金", "土"]}
        maxPerDay={3}
        onMonthChange={setMonth}
        onSelectDate={(iso) => setSelection({ type: "date", iso, events: events.filter((event) => event.date === iso) })}
        onSelectEvent={(event) => setSelection({ type: "event", iso: eventDateIso(event.date), event })}
      />
      <Sheet open={selection != null} onOpenChange={(open) => !open && setSelection(null)}>
        <SheetContent
          portalContainer={portalContainer}
          overlayClassName="rounded-md"
          closeLabel="閉じる"
        >
          <SheetHeader>
            <SheetTitle asChild>
              <p>プレビュー</p>
            </SheetTitle>
            <SheetDescription>選択した日付または予定の詳細を確認します。</SheetDescription>
          </SheetHeader>
          {selection ? (
            <div className="mt-4 grid gap-4 text-sm">
              <div className="rounded-lg border bg-card p-3">
                <p className="font-medium text-foreground">
                  {selection.type === "date"
                    ? selection.iso + " の予定"
                    : "予定「" + String(selection.event.label) + "」"}
                </p>
                <p className="mt-1 text-xs text-muted-foreground">{selection.iso}</p>
              </div>
              {selection.type === "date" ? (
                <div className="grid gap-2">
                  {selection.events.length > 0 ? (
                    selection.events.map((event) => (
                      <div key={event.id} className="rounded-md border bg-background px-3 py-2">
                        <p className="font-medium text-foreground">{event.label}</p>
                        <p className="mt-1 text-xs text-muted-foreground">{event.ariaLabel}</p>
                      </div>
                    ))
                  ) : (
                    <p className="rounded-md border bg-muted/30 px-3 py-2 text-muted-foreground">この日に登録された予定はありません。</p>
                  )}
                </div>
              ) : (
                <div className="rounded-md border bg-muted/30 px-3 py-2">
                  <p className="font-medium text-foreground">{selection.event.label}</p>
                  <p className="mt-1 text-muted-foreground">{selection.event.ariaLabel}</p>
                </div>
              )}
            </div>
          ) : null}
        </SheetContent>
      </Sheet>
    </div>
  );
}