import { useRef, useState } from "react";

export function ArchitectureFigure({ source, alt }: { source: string; alt: string }) {
  const dialog = useRef<HTMLDialogElement>(null);
  const trigger = useRef<HTMLButtonElement>(null);
  const stage = useRef<HTMLDivElement>(null);
  const [originalSize, setOriginalSize] = useState(false);

  function open() {
    setOriginalSize(false);
    dialog.current?.showModal();
  }

  return (
    <>
      <button
        ref={trigger}
        className="architecture-preview"
        onClick={open}
        aria-label={`放大：${alt}`}
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={source} alt={alt} />
      </button>
      <dialog
        ref={dialog}
        className="image-lightbox"
        aria-label={alt}
        onClick={(event) => {
          if (
            event.target === dialog.current ||
            event.target === stage.current
          ) {
            dialog.current?.close();
          }
        }}
        onClose={() => trigger.current?.focus()}
      >
        <button
          className="image-lightbox-close"
          aria-label="关闭图片"
          onClick={() => dialog.current?.close()}
        >
          ×
        </button>
        <div
          ref={stage}
          className="image-lightbox-stage"
          tabIndex={0}
          aria-label="图片滚动区域"
        >
          <button
            className={`image-lightbox-picture${originalSize ? " original-size" : ""}`}
            onClick={() => setOriginalSize((value) => !value)}
            aria-label={originalSize ? "图片适应屏幕" : "查看图片原尺寸"}
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={source} alt={alt} />
          </button>
        </div>
      </dialog>
    </>
  );
}