Date range picker

'use client';

import * as React from 'react';
import { DateRangePicker } from './date-range-picker';
import { addDays, type DateRange, startOfDay } from './date-range-picker-core';

const last7 = (today: Date): DateRange => ({ start: addDays(today, -6), end: today });
const stayFrom = (today: Date): DateRange => ({ start: addDays(today, 14), end: addDays(today, 17) });
const noSubscribe = () => () => {};
const readToday = () => startOfDay(new Date()).getTime();

/** Replay steps: open, pick the 3rd, sweep to the 12th, pick it, choose Last 30 days, apply. */
function runScript(root: HTMLElement, today: Date, later: (ms: number, run: () => void) => void) {
  const trigger = root.querySelector<HTMLElement>('[data-slot="date-range-trigger"]');
  const panel = () => document.querySelector<HTMLElement>('[data-slot="date-range-panel"]');
  // The panel opens on the month where the applied range starts.
  const shown = last7(today).start;
  const day = (n: number) => {
    const iso = `${shown.getFullYear()}-${String(shown.getMonth() + 1).padStart(2, '0')}-${String(n).padStart(2, '0')}`;
    return panel()?.querySelector<HTMLElement>(`[data-date="${iso}"]`);
  };
  const move = (n: number) => day(n)?.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }));
  later(300, () => trigger?.click());
  later(1000, () => day(3)?.click());
  for (let n = 4; n <= 12; n++) later(1300 + (n - 4) * 120, () => move(n));
  later(2700, () => day(12)?.click());
  later(3600, () =>
    [...(panel()?.querySelectorAll<HTMLElement>('[aria-pressed]') ?? [])]
      .find((b) => b.textContent?.trim() === 'Last 30 days')
      ?.click(),
  );
  later(4600, () =>
    [...(panel()?.querySelectorAll<HTMLElement>('button') ?? [])]
      .find((b) => b.textContent?.trim() === 'Apply')
      ?.click(),
  );
}

export default function DateRangePickerDemo({ 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 today = todayMs === null ? null : new Date(todayMs);
  const [report, setReport] = React.useState<DateRange | null>(null);
  const [stay, setStay] = React.useState<DateRange | null>(null);

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

  return (
    <div ref={area} className="flex w-full max-w-[560px] flex-col gap-6">
      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-secondary pb-4">
        <div className="flex flex-col">
          <h3 className="text-md font-semibold text-primary">Revenue</h3>
          <p className="text-sm text-tertiary">Orders paid in the selected period</p>
        </div>
        {today && <DateRangePicker align="end" value={report ?? last7(today)} onValueChange={setReport} />}
      </div>
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-col">
          <h3 className="text-md font-semibold text-primary">Your stay</h3>
          <p className="text-sm text-tertiary">Check-in and check-out dates</p>
        </div>
        {today && (
          <DateRangePicker
            align="end"
            unit="nights"
            presets={[]}
            min={today}
            value={stay ?? stayFrom(today)}
            onValueChange={setStay}
          />
        )}
      </div>
    </div>
  );
}