import React from "react";
import clsx from "clsx";
import { initialsOf } from "../../../components/ui/org-badge.tsx";

// Smaller than this on either side is not a picture of anything; staging holds a 1x1 logo that drew
// as a flat colour block.
const SMALLEST_USABLE_IMAGE = 8;

// A photograph when there is a real one, the practice's logo for its front desk, and otherwise the
// initials. Never the stock silhouette: a face that belongs to nobody reads as a person on the row.
// An image that fails to load, or loads as a speck, falls back to the initials too.
export const InboxAvatar = ({
  label,
  imageUrl,
  isLogo = false,
  glyph,
  tone,
}: {
  label: string;
  imageUrl?: string;
  isLogo?: boolean;
  glyph?: React.ReactNode;
  /** Whose mark it is, for initials only: "patient" draws the deck's tan patient mark. */
  tone?: "patient";
}) => {
  const [unusable, setUnusable] = React.useState<string | null>(null);
  const showImage = !!imageUrl && unusable !== imageUrl;

  return (
    <span
      className={clsx("ahr-inbox-avatar", isLogo && showImage && "ahr-inbox-avatar--logo", tone === "patient" && !showImage && "ahr-inbox-avatar--patient")}
      aria-hidden="true"
      data-testid="inbox-avatar"
    >
      {showImage ? (
        <img
          src={imageUrl}
          alt=""
          onError={() => setUnusable(imageUrl)}
          onLoad={(event) => {
            const { naturalWidth, naturalHeight } = event.currentTarget;
            if (naturalWidth < SMALLEST_USABLE_IMAGE || naturalHeight < SMALLEST_USABLE_IMAGE) {
              setUnusable(imageUrl);
            }
          }}
        />
      ) : (
        glyph ?? initialsOf(label)
      )}
    </span>
  );
};

export type InboxRowProps = {
  avatar: React.ReactNode;
  name: string;
  sub?: string;
  preview?: string;
  time: string;
  unread: number;
  selected: boolean;
  online?: boolean;
  onOpen: (event: React.SyntheticEvent) => void;
};

// Name and time on the first line, who they are on the second, the last thing said on the third.
export const InboxRow = ({ avatar, name, sub, preview, time, unread, selected, online, onOpen }: InboxRowProps) => (
  <div
    role="button"
    tabIndex={0}
    data-testid="messages-inbox-row"
    onClick={onOpen}
    onKeyDown={(event: React.KeyboardEvent) => {
      if (event.key !== "Enter" && event.key !== " ") return;
      event.preventDefault();
      onOpen(event);
    }}
    className={clsx(
      "ahr-inbox-row focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
      selected && "ahr-inbox-row--on",
    )}
  >
    <span className="ahr-inbox-avatar-wrap">
      {avatar}
      {online && <span className="ahr-inbox-presence" data-testid="inbox-presence" />}
    </span>
    <span className="ahr-inbox-body min-w-0">
      <span className="ahr-inbox-top">
        <span className="ahr-inbox-name min-w-0 truncate">{name}</span>
        <span className="ahr-row-time">{time}</span>
      </span>
      {sub && <span className="ahr-inbox-sub min-w-0 truncate">{sub}</span>}
      {(preview || unread > 0) && (
        <span className="ahr-inbox-bottom">
          <span className="ahr-inbox-preview min-w-0 truncate">{preview}</span>
          {unread > 0 && <span className="ahr-count-badge shrink-0">{unread}</span>}
        </span>
      )}
    </span>
  </div>
);