Avatar upload

"use client";

import { useEffect, useId, useRef, useState, type ComponentProps, type CSSProperties, type DragEvent, type ReactNode } from "react";
import { Button } from "./button";
import { Icon } from "./icon";
import "./avatar-upload.css";

export type AvatarUploadProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue"> & {
  /** Whose picture it is. Used for the initials and the image's alt text. */
  name: string;
  /** The picture to show, when you control it. null shows the initials. */
  src?: string | null;
  /** The picture to show first, when you do not. */
  defaultSrc?: string;
  /** Called with an accepted file, or null when the picture is removed. The part never uploads. */
  onFileChange?: (file: File | null) => void;
  /** Visible label. */
  label?: ReactNode;
  /** Quiet line under the label, such as accepted types and size. */
  hint?: ReactNode;
  /** A message from you, such as a failed upload. Shown in place of the part's own checks. */
  error?: ReactNode;
  /** Same format as the native attribute. Dropped files are checked against it too. */
  accept?: string;
  /** Largest accepted file, in bytes. */
  maxSize?: number;
  /** Circle diameter in pixels. */
  size?: number;
  /** Name of the file input, so a form posts the chosen file. */
  inputName?: string;
  disabled?: boolean;
};

/** "Ana María Ortiz" gives "AO", "Ravi" gives "R". */
function initials(name: string): string {
  const words = name.trim().split(/\s+/).filter(Boolean);
  const first = words[0];
  if (first === undefined) return "";
  const last = words.length > 1 ? words[words.length - 1] : undefined;
  return ((Array.from(first)[0] ?? "") + (last === undefined ? "" : (Array.from(last)[0] ?? ""))).toLocaleUpperCase();
}

function formatSize(bytes: number): string {
  if (bytes < 1000) return `${bytes} B`;
  if (bytes < 1_000_000) return `${Math.round(bytes / 1000)} KB`;
  const mb = bytes / 1_000_000;
  return `${mb < 10 ? mb.toFixed(1).replace(/\.0$/, "") : Math.round(mb)} MB`;
}

/** The same rules as the accept attribute: extensions, exact types and type/* wildcards. */
function matches(file: File, accept: string): boolean {
  const fileName = file.name.toLowerCase();
  const type = file.type.toLowerCase();
  return accept
    .split(",")
    .map((rule) => rule.trim().toLowerCase())
    .filter(Boolean)
    .some((rule) => (rule.startsWith(".") ? fileName.endsWith(rule) : rule.endsWith("/*") ? type.startsWith(rule.slice(0, -1)) : type === rule));
}

export function AvatarUpload({
  name,
  src,
  defaultSrc,
  onFileChange,
  label = "Profile picture",
  hint,
  error,
  accept = "image/png,image/jpeg,image/webp,image/gif",
  maxSize,
  size = 72,
  inputName,
  disabled = false,
  className,
  style,
  ...rest
}: AvatarUploadProps) {
  const id = useId();
  const input = useRef<HTMLInputElement>(null);
  const chooser = useRef<HTMLButtonElement>(null);
  const [local, setLocal] = useState<string | null | undefined>(undefined);
  const [problem, setProblem] = useState("");
  const [dragging, setDragging] = useState(false);
  const depth = useRef(0);

  // A preview made here is ours to free.
  useEffect(() => () => void (local && URL.revokeObjectURL(local)), [local]);

  const picture = src !== undefined ? src : local !== undefined ? local : (defaultSrc ?? null);
  const message = error ?? (problem || null);

  function take(file: File | undefined) {
    if (!file || disabled) return;
    if (!matches(file, accept)) {
      setProblem(`${file.name} is not an image this field takes.`);
    } else if (maxSize !== undefined && file.size > maxSize) {
      setProblem(`${file.name} is ${formatSize(file.size)}. The limit is ${formatSize(maxSize)}.`);
    } else {
      setProblem("");
      if (src === undefined) setLocal(URL.createObjectURL(file));
      onFileChange?.(file);
      return;
    }
    if (input.current) input.current.value = "";
  }

  function remove() {
    setProblem("");
    if (input.current) input.current.value = "";
    if (src === undefined) setLocal(null);
    onFileChange?.(null);
    // Remove leaves with the picture, so focus goes to the button that adds one.
    chooser.current?.focus();
  }

  function onDragEnter(event: DragEvent<HTMLDivElement>) {
    if (disabled || !event.dataTransfer.types.includes("Files")) return;
    event.preventDefault();
    depth.current += 1;
    setDragging(true);
  }

  function onDrop(event: DragEvent<HTMLDivElement>) {
    depth.current = 0;
    setDragging(false);
    if (disabled) return;
    event.preventDefault();
    take(event.dataTransfer.files[0]);
  }

  return (
    <div
      {...rest}
      className={["eq-avatar-upload", className].filter(Boolean).join(" ")}
      style={{ ...style, "--_size": `${size}px` } as CSSProperties}
      data-dragging={dragging || undefined}
      data-disabled={disabled || undefined}
    >
      <div
        className="eq-avatar-upload-circle"
        onClick={() => !disabled && input.current?.click()}
        onDragEnter={onDragEnter}
        onDragOver={(event) => {
          if (disabled || !event.dataTransfer.types.includes("Files")) return;
          event.preventDefault();
          event.dataTransfer.dropEffect = "copy";
        }}
        onDragLeave={() => {
          depth.current = Math.max(0, depth.current - 1);
          if (depth.current === 0) setDragging(false);
        }}
        onDrop={onDrop}
      >
        {picture ? (
          <img className="eq-avatar-upload-image" src={picture} alt={`${name}, current picture`} />
        ) : (
          <span className="eq-avatar-upload-initials" role="img" aria-label={`${name}, no picture`}>
            {initials(name) || <Icon name="user" size={24} />}
          </span>
        )}
        <span className="eq-avatar-upload-overlay" aria-hidden="true">
          <Icon name="camera" size={20} />
        </span>
      </div>
      <div className="eq-avatar-upload-body">
        <span className="eq-avatar-upload-label" id={`${id}-label`}>
          {label}
        </span>
        {hint != null && (
          <span className="eq-avatar-upload-hint" id={`${id}-hint`}>
            {hint}
          </span>
        )}
        <div className="eq-avatar-upload-actions">
          <Button
            ref={chooser}
            size="s"
            variant="outline"
            disabled={disabled}
            aria-describedby={[`${id}-label`, hint != null ? `${id}-hint` : "", message ? `${id}-message` : ""].filter(Boolean).join(" ")}
            onClick={() => input.current?.click()}
          >
            {picture ? "Replace" : "Upload photo"}
          </Button>
          {picture && (
            <Button size="s" variant="ghost" disabled={disabled} onClick={remove}>
              Remove
            </Button>
          )}
        </div>
        <span className="eq-avatar-upload-message" id={`${id}-message`} role="status">
          {message}
        </span>
      </div>
      <input
        ref={input}
        className="eq-avatar-upload-input"
        type="file"
        name={inputName}
        accept={accept}
        disabled={disabled}
        tabIndex={-1}
        aria-hidden="true"
        onChange={(event) => take(event.currentTarget.files?.[0])}
      />
    </div>
  );
}