Drop zone membrane

'use client';

import * as React from 'react';
import { DropZoneIcon } from '../drop-zone/drop-zone-file-row';
import { dropZoneIcons } from '../drop-zone/drop-zone-variants';
import { prefersReducedMotion } from '../lib/motion';
import {
  type DraggedFile,
  DropZoneMembrane,
  type DropZoneMembraneHandle,
  type DropZoneUpload,
  type Point,
} from './drop-zone-membrane';

const MB = 1024 * 1024;
const DOCX = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';

/** A stand-in file: the content is empty, the size is what the row shows. */
function demoFile(name: string, size: number, type: string) {
  const file = new File([''], name, { type });
  Object.defineProperty(file, 'size', { value: Math.round(size) });
  return file;
}

/** Pretend upload over about 2 seconds; a name with "fail" fails once at 64%. */
const demoUpload = (
  file: File,
  { progress, signal }: Parameters<DropZoneUpload>[1],
  failedOnce: Set<string>,
) =>
  new Promise<void>((resolve, reject) => {
    const steps = [0.22, 0.48, 0.64, 0.88, 1];
    let step = 0;
    const timer = window.setInterval(() => {
      if (signal.aborted) {
        window.clearInterval(timer);
        return;
      }
      const value = steps[step++] ?? 1;
      progress(value);
      if (value === 0.64 && file.name.includes('fail') && !failedOnce.has(file.name)) {
        failedOnce.add(file.name);
        window.clearInterval(timer);
        reject(new Error('The connection was lost.'));
      } else if (value === 1) {
        window.clearInterval(timer);
        resolve();
      }
    }, 400);
  });

// The scripted drags, in area pixels (the area is 168px tall); the last point of each is the drop.
const PDF_PATH: Point[] = [
  { x: 640, y: -170 },
  { x: 470, y: -70 },
  { x: 410, y: -28 },
  { x: 380, y: 44 },
];
const DOCX_PATH: Point[] = [
  { x: 640, y: -170 },
  { x: 440, y: -64 },
  { x: 400, y: -36 },
];

export default function DropZoneMembraneDemo({ replay = 0 }: { replay?: number }) {
  const root = React.useRef<HTMLDivElement>(null);
  const zone = React.useRef<DropZoneMembraneHandle>(null);
  const failedOnce = React.useRef(new Set<string>());
  const [ghost, setGhost] = React.useState<{ point: Point; name: string } | null>(null);
  const upload = React.useCallback<DropZoneUpload>(
    (file, context) => demoUpload(file, context, failedOnce.current),
    [],
  );

  React.useEffect(() => {
    if (replay === 0) return;
    let frame = 0;
    const timers: number[] = [];
    const at = (ms: number, run: () => void) => timers.push(window.setTimeout(run, ms));
    // Moves the pretend drag image along a path, easing in and out, and tells the membrane where it is.
    // With reduced motion the drag image waits at its start, then jumps to the drop point.
    const glide = (path: Point[], ms: number, file: DraggedFile & { name: string }, done: () => void) => {
      const reduced = prefersReducedMotion(root.current);
      let start = 0;
      const tick = (now: number) => {
        start ||= now;
        const t = reduced ? (now - start >= ms ? 1 : 0) : Math.min(1, (now - start) / ms);
        if (reduced && t === 0 && now !== start) {
          frame = requestAnimationFrame(tick);
          return;
        }
        const eased = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
        const f = eased * (path.length - 1);
        const i = Math.min(path.length - 2, Math.floor(f));
        const a = path[i] as Point;
        const b = path[i + 1] as Point;
        const point = { x: a.x + (b.x - a.x) * (f - i), y: a.y + (b.y - a.y) * (f - i) };
        setGhost({ point, name: file.name });
        zone.current?.dragTo(point, [file]);
        if (t < 1) frame = requestAnimationFrame(tick);
        else done();
      };
      frame = requestAnimationFrame(tick);
    };

    failedOnce.current.clear();
    zone.current?.clear();
    setGhost(null);
    at(300, () =>
      glide(PDF_PATH, 1400, { name: 'brief.pdf', type: 'application/pdf' }, () =>
        at(250, () => {
          setGhost(null);
          zone.current?.drop([demoFile('brief.pdf', 2.4 * MB, 'application/pdf')]);
        }),
      ),
    );
    at(4300, () =>
      glide(DOCX_PATH, 1100, { name: 'notes.docx', type: DOCX }, () =>
        at(500, () => {
          setGhost(null);
          zone.current?.drop([demoFile('notes.docx', 0.3 * MB, DOCX)]);
        }),
      ),
    );
    return () => {
      cancelAnimationFrame(frame);
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div
      ref={root}
      className="flex w-[520px] max-w-full flex-col gap-xl rounded-2xl border border-secondary bg-primary p-2xl shadow-xs"
    >
      <h3 className="text-sm font-semibold text-primary">Attach files</h3>
      <div className="relative">
        <DropZoneMembrane
          ref={zone}
          accept="image/*,.pdf"
          maxSize={10 * MB}
          maxFiles={5}
          hint="PNG, JPG or PDF, up to 10 MB"
          onUpload={upload}
        />
        {ghost && (
          <div
            aria-hidden="true"
            className="pointer-events-none absolute top-0 left-0 z-20 flex -translate-x-1/2 -translate-y-1/2 items-center gap-md whitespace-nowrap rounded-full border border-primary bg-primary py-sm pr-xl pl-lg text-sm text-primary opacity-90 shadow-md [&_svg]:size-4 [&_svg]:text-fg-quaternary"
            style={{ left: ghost.point.x, top: ghost.point.y }}
          >
            <DropZoneIcon d={dropZoneIcons.file} />
            {ghost.name}
          </div>
        )}
      </div>
    </div>
  );
}