import { useEffect, useRef } from "react";
import type { RawImage } from "../imageConvert.ts";
import { drawRawToCanvas, rawToDataUrl } from "../imageLoad.ts";

interface Props {
  title: string;
  image: RawImage | null;
  placeholder?: string;
  /** When set, shows a download link for the image (PNG). */
  downloadName?: string;
  overlay?: React.ReactNode;
}

export function ImageView({
  title,
  image,
  placeholder,
  downloadName,
  overlay,
}: Props) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (image && canvasRef.current) {
      drawRawToCanvas(canvasRef.current, image);
    }
  }, [image]);

  return (
    <div className="imageview">
      <div className="imageview-head">
        <span className="imageview-title">{title}</span>
        {image && (
          <span className="imageview-dims">
            {image.width} × {image.height}
            {downloadName && (
              <>
                {" · "}
                <a
                  href={image ? rawToDataUrl(image) : "#"}
                  download={downloadName}
                >
                  download
                </a>
              </>
            )}
          </span>
        )}
      </div>
      <div className="imageview-body">
        {image ? (
          <canvas ref={canvasRef} className="imageview-canvas" />
        ) : (
          <div className="imageview-placeholder">{placeholder ?? "—"}</div>
        )}
        {overlay}
      </div>
    </div>
  );
}