Diff review

'use client';

import * as React from 'react';
import { type Change, type Decisions, DiffReview } from './diff-review';

const WORDS: Change[] = [
  {
    id: 'description',
    label: 'Product description',
    before: 'A light jacket for cold mornings. It packs into its own pocket and weighs very little.',
    after: 'A warm, light jacket for chilly mornings. It packs into its own pocket and weighs 240 g.',
  },
  {
    id: 'care',
    label: 'Care note',
    before: 'Wash cold and hang to dry.',
    after: 'Machine wash cold and hang to dry in the shade.',
  },
  {
    id: 'closing',
    label: 'Closing line',
    before: 'Made to be taken everywhere.',
    after: 'Built to go with you on every trip, near or far.',
  },
];

const LINES: Change[] = [
  {
    id: 'config',
    label: 'config.json',
    before: '{\n  "lang": "en",\n  "theme": "light",\n  "fontSize": 14\n}',
    after: '{\n  "lang": "en",\n  "theme": "system",\n  "fontSize": 14\n}',
  },
  {
    id: 'motion',
    label: 'motion.json',
    before: '{\n  "speed": "slow",\n  "loop": true\n}',
    after: '{\n  "speed": "calm",\n  "loop": true,\n  "pause": 2\n}',
  },
];

// Replay accepts the first change, declines the second and uses Accept all for the rest.
const SCRIPT: [at: number, run: (now: Decisions) => Decisions][] = [
  [1200, (now) => ({ ...now, description: 'accepted' })],
  [2400, (now) => ({ ...now, care: 'declined' })],
];

export default function DiffReviewDemo({ replay = 0 }: { replay?: number }) {
  const [words, setWords] = React.useState<Decisions>({});
  const [lines, setLines] = React.useState<Decisions>({});
  const root = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (replay === 0) return;
    setWords({});
    setLines({});
    const timers = SCRIPT.map(([at, run]) => window.setTimeout(() => setWords(run), at));
    timers.push(
      window.setTimeout(
        () => root.current?.querySelector<HTMLElement>('[data-slot="accept-all"]')?.click(),
        3600,
      ),
    );
    return () => {
      for (const t of timers) window.clearTimeout(t);
    };
  }, [replay]);

  return (
    <div ref={root} className="flex w-full max-w-[560px] flex-col gap-10">
      <DiffReview changes={WORDS} decisions={words} onDecisionsChange={setWords} />
      <DiffReview changes={LINES} mode="lines" decisions={lines} onDecisionsChange={setLines} />
    </div>
  );
}