Live activity

'use client';

import * as React from 'react';
import { LiveActivity, type LiveActivityItem, type LiveActivityStep } from './live-activity';

const TOTAL = 4000;

function stepsAt(progress: number, done: boolean): LiveActivityStep[] {
  const names = ['Read file', 'Match fields', 'Save contacts'];
  const at = done ? 3 : progress < 0.3 ? 0 : progress < 0.7 ? 1 : 2;
  return names.map((label, i) => ({ label, status: i < at ? 'done' : i === at ? 'current' : 'pending' }));
}

function importing(run: number, progress: number, stop: () => void): LiveActivityItem {
  return {
    id: `import-${run}`,
    label: 'Importing contacts',
    detail: 'contacts.csv, 4,000 rows',
    progress,
    count: Math.round(progress * TOTAL),
    steps: stepsAt(progress, false),
    actions: [{ label: 'Stop', onSelect: stop }],
  };
}

function imported(run: number): LiveActivityItem {
  return {
    id: `import-${run}`,
    label: 'Contacts imported',
    status: 'done',
    detail: 'contacts.csv, 4,000 rows',
    progress: 1,
    count: TOTAL,
    steps: stepsAt(1, true),
    actions: [{ label: 'View contacts', primary: true }],
  };
}

export default function LiveActivityDemo({ replay = 0 }: { replay?: number }) {
  const [activity, setActivity] = React.useState<LiveActivityItem | null>(() => importing(0, 0.62, () => {}));
  const [expanded, setExpanded] = React.useState(false);
  const timers = React.useRef<number[]>([]);

  const clear = React.useCallback(() => {
    for (const timer of timers.current) window.clearTimeout(timer);
    timers.current = [];
  }, []);
  React.useEffect(() => clear, [clear]);

  // Replay: a new import fills over about 4 seconds; the panel opens halfway and folds, then the pill folds away.
  React.useEffect(() => {
    if (replay === 0) return;
    clear();
    const later = (ms: number, run: () => void) => timers.current.push(window.setTimeout(run, ms));
    const stop = () => {
      clear();
      setExpanded(false);
      setActivity(null);
    };
    setExpanded(false);
    setActivity(null);
    for (let i = 0; i <= 20; i++) later(400 + i * 200, () => setActivity(importing(replay, i / 20, stop)));
    later(1600, () => setExpanded(true));
    later(3000, () => setExpanded(false));
    later(4600, () => setActivity(imported(replay)));
    later(6400, () => setActivity(null));
    later(7400, () => setActivity(importing(0, 0.62, () => {})));
  }, [replay, clear]);

  return (
    <div className="flex min-h-[340px] w-full items-start justify-center pt-4">
      <LiveActivity activity={activity} expanded={expanded} onExpandedChange={setExpanded} locales="en-US" />
    </div>
  );
}