/**
 * @file ImageLightbox.tsx
 * @description One image shown full size over the whole page; a click or
 * Escape closes it. Rendered into `document.body`, so no pane, its stacking
 * layer or a header drawn over a pane can cover it — opened from inside a
 * pane's Chat view, a `fixed` overlay would otherwise stay in that pane's
 * layer, under anything stacked above it. `useDialog` takes the focus while it
 * is open and gives it back, and its Escape closes only this, the top dialog.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useRef } from "react";
import { createPortal } from "react-dom";
import { useDialog } from "../hooks/useDialog";

export function ImageLightbox({
  src,
  alt,
  onClose,
}: {
  src: string;
  alt: string;
  onClose: () => void;
}) {
  const panel = useRef<HTMLDivElement>(null);
  useDialog(true, panel, onClose);
  return createPortal(
    <div
      ref={panel}
      tabIndex={-1}
      role="dialog"
      aria-modal="true"
      aria-label={alt}
      data-testid="image-lightbox"
      onClick={onClose}
      className="fixed inset-0 z-[200] flex cursor-zoom-out items-center justify-center bg-black/60 p-8 outline-none"
    >
      <img
        src={src}
        alt={alt}
        className="max-h-full max-w-full rounded-lg object-contain shadow-2xl"
      />
    </div>,
    document.body
  );
}