import { useId, useRef } from "react";

import type { ResolveEvidenceAsset } from "../../../domain/public-render-content.ts";

type PublicEvidenceFigureProps = {
  evidenceKey: string;
  alt: string;
  caption: string;
  zoom: boolean;
  resolveEvidenceAsset: ResolveEvidenceAsset;
};

export function PublicEvidenceFigure({
  evidenceKey,
  alt,
  caption,
  zoom,
  resolveEvidenceAsset,
}: PublicEvidenceFigureProps) {
  const asset = resolveEvidenceAsset(evidenceKey);
  const descriptionId = useId();
  const triggerRef = useRef<HTMLButtonElement>(null);
  const dialogRef = useRef<HTMLDialogElement>(null);

  function open() {
    dialogRef.current?.showModal();
  }

  function close() {
    dialogRef.current?.close();
  }

  if (!zoom) {
    return (
      <figure className="evidence-figure">
        <img
          src={asset.src}
          width={asset.width}
          height={asset.height}
          alt={alt}
          loading="lazy"
        />
        <figcaption>{caption}</figcaption>
      </figure>
    );
  }

  return (
    <>
      <figure className="evidence-figure">
        <button
          ref={triggerRef}
          className="evidence-image-button"
          type="button"
          aria-label={asset.triggerLabel}
          aria-describedby={descriptionId}
          onClick={open}
        >
          <img
            src={asset.src}
            width={asset.width}
            height={asset.height}
            alt={alt}
            loading="lazy"
          />
          <span>크게 보기</span>
          <span className="visually-hidden" id={descriptionId}>
            {alt}
          </span>
        </button>
        <figcaption>{caption}</figcaption>
      </figure>

      <dialog
        ref={dialogRef}
        className="figure-dialog"
        aria-label={asset.dialogLabel}
        onClose={() => triggerRef.current?.focus()}
        onClick={(event) => {
          if (event.target === event.currentTarget) close();
        }}
      >
        <div>
          <button type="button" className="dialog-close" onClick={close}>
            닫기
          </button>
          <img
            src={asset.src}
            width={asset.width}
            height={asset.height}
            alt={alt}
            loading="lazy"
          />
          <p>{caption}</p>
        </div>
      </dialog>
    </>
  );
}