Image

"use client";

import { useEffect, useId, useRef, useState, type ComponentProps, type CSSProperties, type ReactNode } from "react";
import { Icon } from "./icon";
import { Lightbox, LightboxItem } from "./lightbox";
import "./image.css";

export type ImageProps = Omit<ComponentProps<"img">, "children"> & {
  /** Required. Describes the picture; pass "" only for a purely decorative image that cannot zoom. */
  alt: string;
  /** The frame's aspect ratio, as CSS takes it: "16 / 9", "1 / 1", "4 / 3". */
  ratio?: string;
  /** cover fills the frame and crops; contain shows the whole image inside it. */
  fit?: "cover" | "contain";
  /** A caption under the image. With one, the root is a figure. */
  caption?: ReactNode;
  /** Makes the image a button that opens it full screen in a Lightbox. */
  zoom?: boolean;
  /** Shown in the frame when the image fails to load. */
  fallbackText?: string;
  /** Added to the root frame, so it sizes and places the whole part. */
  className?: string;
  /** Applied to the root frame, so width and margins size the whole part. */
  style?: CSSProperties;
};

type Status = "loading" | "loaded" | "error";

export function Image({
  alt,
  src,
  ratio = "16 / 9",
  fit = "cover",
  caption,
  zoom = false,
  fallbackText = "Image unavailable",
  className,
  style,
  onLoad,
  onError,
  ...rest
}: ImageProps) {
  const img = useRef<HTMLImageElement>(null);
  const viewer = useId();
  // Tagged with the src it belongs to, so a new src starts loading again without an effect.
  const [settled, setSettled] = useState<{ src: unknown; status: Status } | null>(null);
  const status: Status = settled && settled.src === src ? settled.status : "loading";

  // The image can finish, or fail, before React hydrates, and then onLoad and onError never
  // fire. Read the element itself once it is in the page.
  useEffect(() => {
    const node = img.current;
    // No src yet: stay a skeleton until one arrives.
    if (!node || !src || !node.complete) return;
    setSettled({ src, status: node.naturalWidth > 0 ? "loaded" : "error" });
  }, [src]);

  const failed = status === "error";
  const canZoom = zoom && !failed && typeof src === "string" && src !== "";
  const Root = caption != null ? "figure" : "div";

  const picture = (
    <img
      ref={img}
      alt={alt}
      src={src}
      decoding="async"
      {...rest}
      className="eq-image-img"
      onLoad={(event) => {
        setSettled({ src, status: "loaded" });
        onLoad?.(event);
      }}
      onError={(event) => {
        setSettled({ src, status: "error" });
        onError?.(event);
      }}
    />
  );

  return (
    <Root
      className={["eq-image", className].filter(Boolean).join(" ")}
      data-status={status}
      data-fit={fit}
      style={style}
    >
      <div className="eq-image-frame" style={{ aspectRatio: ratio }}>
        {canZoom ? (
          <button
            type="button"
            className="eq-image-zoom"
            command="show-modal"
            commandfor={viewer}
            aria-haspopup="dialog"
            aria-label={`${alt}, view larger`}
          >
            {picture}
            <span className="eq-image-zoom-hint" aria-hidden="true">
              <Icon name="zoom-in" size="s" />
            </span>
          </button>
        ) : (
          picture
        )}
        {failed && (
          <div className="eq-image-fallback" role={alt ? "img" : undefined} aria-label={alt ? `${alt}. ${fallbackText}` : undefined} aria-hidden={alt ? undefined : true}>
            <Icon name="image" size="m" />
            <span className="eq-image-fallback-text">{fallbackText}</span>
          </div>
        )}
      </div>
      {caption != null && <figcaption className="eq-image-caption">{caption}</figcaption>}
      {canZoom && (
        <Lightbox
          id={viewer}
          label={alt || "Image"}
          className="eq-image-viewer"
        >
          <LightboxItem caption={typeof caption === "string" ? caption : undefined}>
            <img className="eq-image-large" src={src} alt={alt} />
          </LightboxItem>
        </Lightbox>
      )}
    </Root>
  );
}