import React from 'react';
import clsx from 'clsx';

export type DeskInboxRowProps = {
    avatar: React.ReactNode;
    name: React.ReactNode;
    /** What kind of conversation this is: Shared inbox, Referral to triage, Colleague. */
    chip?: string;
    preview?: string;
    time: string;
    unread: number;
    selected: boolean;
    onOpen: (event: React.SyntheticEvent) => void;
};

// The desk deck's row: name, time and unread on one line, the kind of conversation under it, then the
// last thing said.
export const DeskInboxRow = ({ avatar, name, chip, preview, time, unread, selected, onOpen }: DeskInboxRowProps) => (
    <div
        role="button"
        tabIndex={0}
        data-testid="desk-inbox-row"
        aria-current={selected ? 'true' : undefined}
        onClick={onOpen}
        onKeyDown={(event: React.KeyboardEvent) => {
            if (event.key !== 'Enter' && event.key !== ' ') return;
            event.preventDefault();
            onOpen(event);
        }}
        className={clsx('ahr-desk-row', selected && 'ahr-desk-row--on')}
    >
        {avatar}
        <span className="ahr-desk-row__body">
            <span className="ahr-desk-row__top">
                <span className="ahr-desk-row__name">{name}</span>
                <span className="ahr-desk-row__time">{time}</span>
                {unread > 0 && <span className="ahr-count-badge">{unread}</span>}
            </span>
            {chip && <span className="ak-pill ak-pill--square ahr-desk-chip">{chip}</span>}
            {preview && <span className="ahr-desk-row__snip">{preview}</span>}
        </span>
    </div>
);

export type DeskDirectoryRowProps = {
    avatar: React.ReactNode;
    name: React.ReactNode;
    sub?: string;
    onOpen: () => void;
    /** The practitioner deck's flat directory row (.trow) rather than the desk deck's card. */
    flat?: boolean;
    /** A colleague-only page names the person here and draws a Message button, as its deck does. */
    messageLabel?: string;
};

// A person to start a conversation with: the desk deck's directory card, or the practitioner deck's
// flat row drawn by the shared row hooks.
export const DeskDirectoryRow = ({ avatar, name, sub, onOpen, flat = false, messageLabel }: DeskDirectoryRowProps) => messageLabel ? (
    <div className="ahr-list-card ahr-mm-person" data-testid="desk-directory-row">
        {avatar}
        <span className="ahr-mm-person__who">
            <span className="ahr-mm-person__name">{name}</span>
            {sub && <span className="ahr-mm-person__sub">{sub}</span>}
        </span>
        <button type="button" className="btn btn-blue-ghost" aria-label={`Message ${messageLabel}`} onClick={onOpen}>Message</button>
    </div>
) : flat ? (
    <button type="button" className="ak-row w-full text-left" onClick={onOpen} data-testid="desk-directory-row">
        <span className="ahr-inbox-avatar-wrap">{avatar}</span>
        <span className="min-w-0 flex-1">
            <span className="ak-row__name flex items-center gap-1.5">{name}</span>
            {sub && <span className="ak-row__detail block">{sub}</span>}
        </span>
    </button>
) : (
    <button type="button" className="ahr-desk-person" onClick={onOpen} data-testid="desk-directory-row">
        {avatar}
        <span className="ahr-desk-person__who">
            <span className="ahr-desk-person__name">{name}</span>
            {sub && <span className="ahr-desk-person__sub">{sub}</span>}
        </span>
    </button>
);