papercrate/frontend/src/documents/panel/createDocumentsSurface.tsx

import React, { ReactNode } from 'react';
import DocumentViewerPanel from '../../preview/DocumentViewerPanel';
import createWorkspaceSurfaceConfig from '../workspaceHeader';
import DocumentsPanel from './DocumentsPanel';
import type { DocumentsPanelHeaderConfig } from './DocumentsPanelHeader';
import { SelectionFloatingPanel } from '../SelectionFloatingActions';
import { createDocumentsTableHeaderActions } from './DocumentsToolbar';

interface CreateDocumentsSurfaceArgs {
  tableProps: Record<string, any>;
  renderSidebarToggle?: () => ReactNode;
  detailProps?: Record<string, any> | null;
  detailOpen?: boolean;
}

const createDocumentsSurface = ({
  tableProps,
  renderSidebarToggle,
  detailProps,
  detailOpen = false,
}: CreateDocumentsSurfaceArgs) => {
  const {
    currentFolderName,
    breadcrumbs,
    searchResults,
    isFilterActive,
    viewMode,
    onViewModeChange,
    onRefresh,
    sortField,
    sortDirection,
    onSortFieldChange,
    onSortDirectionToggle,
    onDeleteSelection,
    tags,
    correspondents,
    documentLookup,
    tagLookupById,
    onBulkTagAdd,
    onBulkTagRemove,
    onBulkCorrespondentAdd,
    onBulkCorrespondentRemove,
    onBulkReanalyze,
    folderOptions,
    onMoveDocumentsToFolder,
    searchIncludeDescendants,
    onToggleSearchIncludeDescendants,
    onInspectDocument,
  } = tableProps;

  const isDeskView = viewMode === 'desk';

  const title = Array.isArray(searchResults) ? 'Search results' : currentFolderName;
  const subtitle = Array.isArray(searchResults)
    ? `${searchResults.length} matching document${searchResults.length === 1 ? '' : 's'}`
    : null;

  const actions = createDocumentsTableHeaderActions({
    viewMode,
    onViewModeChange,
    onRefresh,
    sortField,
    onSortFieldChange,
    sortDirection,
    onSortDirectionToggle,
    isFilterActive,
    includeDescendants: searchIncludeDescendants,
    onToggleIncludeDescendants: onToggleSearchIncludeDescendants,
  });

  const floatingActions = (
    <SelectionFloatingPanel
      documentLookup={documentLookup}
      tags={tags}
      tagLookupById={tagLookupById}
      correspondents={correspondents}
      onBulkTagAdd={onBulkTagAdd}
      onBulkTagRemove={onBulkTagRemove}
      onBulkCorrespondentAdd={onBulkCorrespondentAdd}
      onBulkCorrespondentRemove={onBulkCorrespondentRemove}
      onBulkReanalyze={onBulkReanalyze}
      onDeleteSelection={onDeleteSelection}
      folderOptions={folderOptions}
      onMoveDocumentsToFolder={onMoveDocumentsToFolder}
    />
  );

  const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
  const detail = detailOpen && detailProps
    ? (() => {
        const { onClose, onOpenPreview, tags: tagOptions, ...restDetailProps } = detailProps;
        return (
          <DocumentViewerPanel
            variant="sidebar"
            onCollapsePanel={onClose}
            onMaximizePanel={onOpenPreview}
            tagOptions={tagOptions}
            {...restDetailProps}
          />
        );
      })()
    : null;

  const headerConfig: DocumentsPanelHeaderConfig = {
    title,
    subtitle,
    leading: sidebarToggle,
    actions,
    breadcrumbs,
    floatingActions,
  };

  return createWorkspaceSurfaceConfig({
    key: isDeskView ? 'workspace' : 'documents',
    variant: isDeskView ? 'workspace' : 'documents',
    title,
    subtitle,
    sidebarToggle,
    actions,
    breadcrumbs,
    selectionLabel: null,
    floatingActions,
    content: (
      <DocumentsPanel
        {...tableProps}
        headerConfig={headerConfig}
        onInspectDocument={onInspectDocument}
      />
    ),
    detail,
  });
};

export default createDocumentsSurface;