import { lazy, Suspense, useEffect } from "react";
import {
  asDownloadLink,
  clearPendingDownload,
  pasteIsForThePage,
  requestDownload,
  usePendingDownload,
} from "../../lib/downloadIntake";

const DownloadDialog = lazy(() => import("./DownloadDialog"));

// The app's one download dialog (lib/downloadIntake), and the paste that opens it: a lone http(s)
// link pasted onto any page — not into a field — is downloaded, the profile picked in the dialog.
export default function DownloadIntake() {
  const source = usePendingDownload();

  useEffect(() => {
    const onPaste = (e: ClipboardEvent) => {
      if (e.defaultPrevented || !pasteIsForThePage(e.target)) return;
      const link = asDownloadLink(e.clipboardData?.getData("text/plain"));
      if (!link) return;
      e.preventDefault();
      requestDownload(link);
    };
    document.addEventListener("paste", onPaste);
    return () => document.removeEventListener("paste", onPaste);
  }, []);

  return (
    <Suspense fallback={null}>
      {/* The link itself under the title: a paste can be an accident, and this says what it was. */}
      {source && (
        <DownloadDialog
          key={source}
          source={source}
          title={source}
          onClose={clearPendingDownload}
        />
      )}
    </Suspense>
  );
}