Attachment chip

'use client';

import * as React from 'react';
import { AttachmentChip, type AttachmentStatus } from './attachment-chip';

// A plain drawing, so the demo needs no photo.
const PHOTO = `data:image/svg+xml;utf8,${encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7a8cc9"/><stop offset="1" stop-color="#d9a98c"/></linearGradient></defs><rect width="72" height="72" fill="url(#g)"/><circle cx="50" cy="22" r="8" fill="#fbf0d6"/><path d="M0 72V52l22-18 20 16 14-10 16 12v20z" fill="#2f3b63"/></svg>',
)}`;

type Item = { status: AttachmentStatus; progress: number };
type State = [Item, Item, Item];

const REST: State = [
  { status: 'ready', progress: 1 },
  { status: 'ready', progress: 1 },
  { status: 'error', progress: 0.3 },
];
const START: State = [
  { status: 'uploading', progress: 0 },
  { status: 'uploading', progress: 0 },
  { status: 'uploading', progress: 0 },
];

type Step = [at: number, index: 0 | 1 | 2, item: Item];
const SCRIPT: Step[] = [
  [300, 0, { status: 'uploading', progress: 0.42 }],
  [350, 1, { status: 'uploading', progress: 0.5 }],
  [400, 2, { status: 'uploading', progress: 0.3 }],
  [1000, 0, { status: 'uploading', progress: 0.67 }],
  [1500, 0, { status: 'uploading', progress: 1 }],
  [1600, 2, { status: 'error', progress: 0.3 }],
  [1700, 0, { status: 'processing', progress: 1 }],
  [2200, 1, { status: 'uploading', progress: 0.9 }],
  [2700, 1, { status: 'ready', progress: 1 }],
  [3500, 0, { status: 'ready', progress: 1 }],
];

export default function AttachmentChipDemo({ replay = 0 }: { replay?: number }) {
  const [items, setItems] = React.useState<State>(REST);
  const timers = React.useRef<number[]>([]);

  const clear = React.useCallback(() => {
    for (const id of timers.current) window.clearTimeout(id);
    timers.current = [];
  }, []);
  const set = React.useCallback((index: number, item: Item) => {
    setItems((now) => now.map((it, i) => (i === index ? item : it)) as State);
  }, []);

  // Replay starts all three uploads again: one finishes and is read, one clears, one fails.
  React.useEffect(() => {
    if (replay === 0) return;
    clear();
    setItems(START);
    timers.current = SCRIPT.map(([at, index, item]) => window.setTimeout(() => set(index, item), at));
    return clear;
  }, [replay, clear, set]);

  // Try again restarts the failed upload and lets it finish.
  const retry = () => {
    clear();
    set(2, { status: 'uploading', progress: 0.1 });
    timers.current = [
      window.setTimeout(() => set(2, { status: 'uploading', progress: 0.6 }), 500),
      window.setTimeout(() => set(2, { status: 'processing', progress: 1 }), 1100),
      window.setTimeout(() => set(2, { status: 'ready', progress: 1 }), 2200),
    ];
  };

  const [sheet, photo, pdf] = items;
  return (
    <div className="flex w-full max-w-[640px] flex-wrap items-center gap-x-4 gap-y-6 rounded-xl border border-secondary bg-primary p-6">
      <AttachmentChip
        key={`a${replay}`}
        name="budget-2027.xlsx"
        size={48_000}
        status={sheet.status}
        progress={sheet.progress}
        onRemove={() => {}}
      />
      <AttachmentChip
        key={`b${replay}`}
        name="team-photo.png"
        size={1_200_000}
        type="image/png"
        previewUrl={PHOTO}
        status={photo.status}
        progress={photo.progress}
        onRemove={() => {}}
      />
      <AttachmentChip
        key={`c${replay}`}
        name="roadmap-q4.pdf"
        size={220_000}
        status={pdf.status}
        progress={pdf.progress}
        onRemove={() => {}}
        onRetry={retry}
      />
    </div>
  );
}