import { useEffect, useState, type ReactNode } from "react";
import clsx from "clsx";
import { ChevronRight, type LucideIcon } from "lucide-react";
import { InboxAvatar } from "../MessagesPage/InboxRow.tsx";
import PresenceDot from "../../../components/PresenceDot/PresenceDot";

// The deck lays the page out as a list beside the person it has open from a tablet up.
const WIDE_QUERY = "(min-width: 768px)";

export const useWideFamilyLayout = (): boolean => {
  const read = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(WIDE_QUERY).matches;
  const [wide, setWide] = useState(read);
  useEffect(() => {
    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
    const query = window.matchMedia(WIDE_QUERY);
    const update = () => setWide(query.matches);
    update();
    query.addEventListener?.("change", update);
    return () => query.removeEventListener?.("change", update);
  }, []);
  return wide;
};

export type PersonTone = "full" | "wait" | undefined;

export const PersonAvatar = ({ name, photoUrl, tone, presenceRef }: {
  name: string;
  photoUrl?: string;
  tone?: PersonTone;
  presenceRef?: string;
}) => (
  <span className={clsx("ahr-family-avatar", tone && `ahr-family-avatar--${tone}`)}>
    <InboxAvatar label={name} imageUrl={photoUrl || undefined} />
    {presenceRef && <PresenceDot reference={presenceRef} className="ahr-family-presence" />}
  </span>
);

export const PersonHead = ({ name, sub, avatar, aside }: {
  name: string;
  sub?: string;
  avatar: ReactNode;
  aside?: ReactNode;
}) => (
  <div className="ahr-family-head">
    {avatar}
    <span className="ahr-family-head-text">
      <span className="ahr-family-head-name">{name}</span>
      {sub && <span className="ahr-family-head-sub">{sub}</span>}
    </span>
    {aside}
  </div>
);

export const PersonAction = ({ icon: Icon, label, sub, onClick, danger = false, disabled = false, testId }: {
  icon: LucideIcon;
  label: string;
  sub?: string;
  onClick: () => void;
  danger?: boolean;
  disabled?: boolean;
  testId?: string;
}) => (
  <button
    type="button"
    className={clsx("ahr-family-action", danger && "ahr-family-action--danger")}
    onClick={onClick}
    disabled={disabled}
    data-testid={testId}
  >
    <Icon className="ahr-family-action-icon" aria-hidden="true" />
    <span className="ahr-family-action-label">{label}</span>
    {sub && <span className="ahr-family-action-sub">{sub}</span>}
    <ChevronRight className="ahr-family-action-go" aria-hidden="true" />
  </button>
);

export const AddRow = ({ label, onClick, testId }: { label: string; onClick: () => void; testId?: string }) => (
  <button type="button" className="ahr-family-add" onClick={onClick} data-testid={testId}>
    <span className="ahr-family-add-plus" aria-hidden="true">+</span>
    {label}
  </button>
);