Week calendar

'use client';

import * as React from 'react';
import { type CalendarEvent, WeekCalendar } from './week-calendar';

const noSubscribe = () => () => {};
const readToday = () => {
  const now = new Date();
  return new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
};
const SAVE_MS = 500;

/** A product team week, Monday to Friday of the week that holds `today`. */
function teamWeek(today: Date): CalendarEvent[] {
  const monday = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() - ((today.getDay() + 6) % 7),
  );
  const at = (day: number, hour: number, minute = 0) =>
    new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + day, hour, minute);
  const standups = [0, 1, 2, 3, 4].map((day) => ({
    id: `standup-${day}`,
    title: 'Standup',
    start: at(day, 9),
    end: at(day, 9, 30),
    tone: 2 as const,
  }));
  return [
    ...standups,
    { id: 'review', title: 'Design review', start: at(1, 10), end: at(1, 11, 30), tone: 1 },
    { id: 'sam', title: '1:1 with Sam', start: at(1, 11, 30), end: at(1, 12, 30), tone: 2 },
    { id: 'launch', title: 'Launch prep', start: at(3, 12), end: at(3, 13, 30), tone: 1 },
    { id: 'busy', title: 'Busy', start: at(2, 10), end: at(2, 11), busy: true },
  ];
}

const wait = () => new Promise((resolve) => setTimeout(resolve, SAVE_MS));

/** Replay: drag Design review 30 minutes down onto 1:1 with Sam, let go, then go to the next week and back. */
function runScript(root: HTMLElement, later: (ms: number, run: () => void) => void) {
  const review = () => root.querySelector<HTMLElement>('[data-event-id="review"]');
  const send = (type: string, x: number, y: number) =>
    review()?.dispatchEvent(
      new PointerEvent(type, { bubbles: true, pointerId: 1, button: 0, clientX: x, clientY: y }),
    );
  const click = (name: string) => root.querySelector<HTMLElement>(`[aria-label="${name}"]`)?.click();
  later(300, () => {
    const rect = review()?.getBoundingClientRect();
    if (!rect) return;
    const x = rect.left + rect.width / 2;
    const y = rect.top + 12;
    send('pointerdown', x, y);
    const steps = 10;
    for (let i = 1; i <= steps; i++) later(i * 60, () => send('pointermove', x, y + (22 * i) / steps));
    later(steps * 60 + 700, () => send('pointerup', x, y + 22));
  });
  later(3000, () => click('Next week'));
  later(4200, () => click('Previous week'));
}

export default function WeekCalendarDemo({ replay = 0 }: { replay?: number }) {
  const area = React.useRef<HTMLDivElement>(null);
  // The clock is read on the client only, so a page built on another day hydrates without a mismatch.
  const todayMs = React.useSyncExternalStore(noSubscribe, readToday, () => null);
  const failed = React.useRef(false);

  React.useEffect(() => {
    if (replay === 0 || !area.current || todayMs === null) return;
    const timers: number[] = [];
    runScript(area.current, (ms, run) => timers.push(window.setTimeout(run, ms)));
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay, todayMs]);

  const today = todayMs === null ? null : new Date(todayMs);

  return (
    <div ref={area} className="w-full">
      {today && (
        // Replay mounts the calendar again, so the week starts from the same events.
        <WeekCalendar
          key={replay}
          label="Team calendar"
          days={5}
          startHour={9}
          endHour={18}
          defaultDate={today}
          defaultEvents={teamWeek(today)}
          onCreate={(event) => wait().then(() => ({ ...event, id: `saved-${event.id}` }))}
          onDelete={() => wait()}
          onUpdate={async (event) => {
            await wait();
            // Moving Launch prep onto Friday fails once, to show the notice.
            if (event.id === 'launch' && event.start.getDay() === 5 && !failed.current) {
              failed.current = true;
              throw new Error('The server is busy.');
            }
          }}
        />
      )}
    </div>
  );
}