Drop zone

'use client';

import * as React from 'react';
import { DropZone, type DropZoneHandle, type DropZoneUpload } from './drop-zone';

const MB = 1024 * 1024;

/** 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 in steps 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.18, 0.42, 0.64, 0.86, 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. Try again.'));
      } else if (value === 1) {
        window.clearInterval(timer);
        resolve();
      }
    }, 400);
  });

export default function DropZoneDemo({ replay = 0 }: { replay?: number }) {
  const zone = React.useRef<DropZoneHandle>(null);
  const failedOnce = React.useRef(new Set<string>());
  const upload = React.useCallback<DropZoneUpload>(
    (file, context) => demoUpload(file, context, failedOnce.current),
    [],
  );

  React.useEffect(() => {
    if (replay === 0) return;
    failedOnce.current.clear();
    zone.current?.clear();
    const timers = [
      window.setTimeout(() => zone.current?.setDragOver(true), 300),
      window.setTimeout(() => {
        zone.current?.setDragOver(false);
        zone.current?.addFiles([
          demoFile('brief.pdf', 2.4 * MB, 'application/pdf'),
          demoFile('moodboard.png', 1.8 * MB, 'image/png'),
          demoFile(
            'notes.docx',
            0.3 * MB,
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          ),
        ]);
      }, 1300),
    ];
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div 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">Project files</h3>
      <DropZone
        ref={zone}
        accept="image/png,image/jpeg,.pdf"
        maxSize={10 * MB}
        maxFiles={5}
        onUpload={upload}
      />
    </div>
  );
}