papercrate/frontend/src/documents/components/DocumentsListRow.tsx

import React from 'react';
import { FolderIcon } from '../../components/icons';
import { formatDate } from '../../utils/date';
import DocumentThumbnailImage from '../DocumentThumbnailImage';
import { resolveCorrespondents } from '../correspondents';
import type { DocumentsListEntry } from '../../types/documents';
import { useDocumentsAssetContext } from '../context/DocumentsAssetContext';
import { useDocumentsViewStateContext } from '../context/DocumentsViewStateContext';
import { useDocumentsCommandContext } from '../context/DocumentsCommandContext';
import type { DocumentViewLogic } from '../logic/useDocumentViewLogic';
import EditableEntryTitle from './EditableEntryTitle';
import EntryCorrespondents from './EntryCorrespondents';
import EntryTags from './EntryTags';
import FolderEntry from './FolderEntry';
import DocumentEntry from './DocumentEntry';

interface DocumentsListRowProps {
    entry: DocumentsListEntry;
    viewLogic: DocumentViewLogic;
    iconSize?: number;
}

const DocumentsListRow: React.FC<DocumentsListRowProps> = (props) => {
    const { entry, iconSize } = props;
    const { ensureAssetUrl, getDocumentAsset } = useDocumentsAssetContext();
    const { scrollRef, activeCorrespondentIdSet, tagLookupById } = useDocumentsViewStateContext();
    const {
        correspondents: { onClick: onCorrespondentClick },
        tags: { onClick: onTagClick, onDetach: onDocumentTagDetach }
    } = useDocumentsCommandContext();

    if (entry.type === 'folder') {
        const folder = entry.folder;
        if (!folder) return null;

        return (
            <FolderEntry
                folder={folder}
                viewLogic={props.viewLogic}
                component="tr"
                className="folder"
            >
                {(logic) => (
                    <>
                        <td className="thumb-cell">
                            <div className="thumb-icon">
                                <FolderIcon className="thumb-icon__image" size={iconSize || 32} />
                            </div>
                        </td>
                        <td className="doc-list__name">
                            <div className="doc-list__name-content">
                                <span className="doc-name__title">
                                    <span className="doc-name__primary">
                                        <EditableEntryTitle
                                            isEditing={logic.isFolderEditing}
                                            draftValue={logic.folderDraftValue}
                                            onChange={logic.handlers.onRenameChange}
                                            onSubmit={logic.handlers.onRenameSubmit}
                                            onCancel={logic.handlers.onRenameCancel}
                                            isSaving={logic.isFolderSaving}
                                            canSubmit={logic.canSubmitFolder}
                                            inputRef={logic.attachFolderInputRef}
                                            allowInlineEdit={logic.allowInlineFolderEdit}
                                            onBeginEditing={logic.handlers.onRenameBegin}
                                            className="doc-name__primary-text"
                                        >
                                            {folder.name}
                                        </EditableEntryTitle>
                                    </span>
                                </span>
                            </div>
                        </td>
                        <td>—</td>
                        <td>—</td>
                    </>
                )}
            </FolderEntry>
        );
    }

    const doc = entry.document;
    if (!doc) return null;

    const correspondents = resolveCorrespondents(doc);
    const issuedLabel = formatDate(doc.issued_at);
    const addedLabel = formatDate(doc.created_at || doc.uploaded_at);

    return (
        <DocumentEntry
            doc={doc}
            viewLogic={props.viewLogic}
            component="tr"
            className="document"
        >
            {(logic) => (
                <>
                    <td className="thumb-cell">
                        <DocumentThumbnailImage
                            document={doc}
                            ensureAssetUrl={ensureAssetUrl}
                            getAsset={getDocumentAsset}
                            alt={`Thumbnail for ${doc.title}`}
                            scrollRootRef={scrollRef}
                            maxSize={props.iconSize}
                        />
                    </td>
                    <td className="doc-list__name">
                        <div className="doc-name">
                            <div className="doc-list__name-content">
                                <span className="doc-name__title">
                                    <EntryCorrespondents
                                        correspondents={correspondents}
                                        activeCorrespondentIdSet={activeCorrespondentIdSet}
                                        onCorrespondentClick={onCorrespondentClick}
                                    />
                                    <span className="doc-name__primary">
                                        <EditableEntryTitle
                                            isEditing={logic.isEditingDoc}
                                            draftValue={logic.documentDraftValue}
                                            onChange={logic.handlers.onRenameChange}
                                            onSubmit={logic.handlers.onRenameSubmit}
                                            onCancel={logic.handlers.onRenameCancel}
                                            isSaving={logic.isDocumentSaving}
                                            canSubmit={logic.canSubmitDocument}
                                            inputRef={logic.attachDocumentInputRef}
                                            allowInlineEdit={logic.allowInlineDocumentEdit}
                                            onBeginEditing={logic.handlers.onRenameBegin}
                                            className="doc-name__primary-text"
                                        >
                                            {doc.title}
                                        </EditableEntryTitle>
                                    </span>
                                </span>
                            </div>
                            <div className="doc-name__tags">
                                <EntryTags
                                    tags={doc.tags || []}
                                    tagLookupById={tagLookupById}
                                    onTagClick={onTagClick}
                                    docId={doc.id}
                                    onDocumentTagDetach={onDocumentTagDetach}
                                    onTagDragStart={logic.handlers.onTagDragStart}
                                    onTagDragEnd={logic.handlers.onTagDragEnd}
                                />
                            </div>
                        </div>
                    </td>
                    <td>{issuedLabel}</td>
                    <td>{addedLabel}</td>
                </>
            )}
        </DocumentEntry>
    );
};


export default DocumentsListRow;