"use client";
import Loading from "./Loading";
import { createPortal } from "react-dom";
import dynamic from "next/dynamic";
import { useState, type ReactNode } from "react";
const PdfViewer = dynamic(() => import("./PdfViewer"), {
  ssr: false,
  loading: () => <Loading fullScreen />,
});
function isPdf(url: string, filename?: string) {
  if (/\.pdf(?:$|[?#])/i.test(filename ?? "")) return true;
  try {
    const parsed = new URL(url, "https://resource.local");
    return (
      /\.pdf$/i.test(parsed.pathname) ||
      /\.pdf(?:$|[?#])/i.test(parsed.searchParams.get("url") ?? "")
    );
  } catch {
    return false;
  }
}
type Props = {
  url: string;
  title: string;
  filename?: string;
  children?: ReactNode;
  className?: string;
};
export default function ResourceLink({
  url,
  title,
  filename,
  children,
  className = "text-sm text-[#9d2449] underline underline-offset-4",
}: Props) {
  const [open, setOpen] = useState(false);
  const [portalHost, setPortalHost] = useState<HTMLElement | null>(null);
  if (!isPdf(url, filename))
    return (
      <a
        href={url}
        target="_blank"
        rel="noopener noreferrer"
        className={`action-link ${className.replace(/\bunderline(?:-offset-\d+)?\b/g, "")}`}
      >
        {children ?? title}
      </a>
    );
  return (
    <>
      <button
        type="button"
        onClick={(event) => {
          setPortalHost(
            event.currentTarget.closest<HTMLElement>('[role="dialog"]') ?? document.body,
          );
          setOpen(true);
        }}
        className={`cursor-pointer text-left ${className}`}
        aria-haspopup="dialog"
      >
        {children ?? title}
      </button>
      {open &&
        createPortal(
          <PdfViewer url={url} title={title} onClose={() => setOpen(false)} />,
          portalHost ?? document.body,
        )}
    </>
  );
}