Stirling-PDF/frontend/src/core/components/fileManager/FileDetails.tsx

import React, { useEffect, useState } from 'react';
import { Stack, Button, Box } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { useIndexedDBThumbnail } from '@app/hooks/useIndexedDBThumbnail';
import { useFileManagerContext } from '@app/contexts/FileManagerContext';
import FilePreview from '@app/components/shared/FilePreview';
import FileInfoCard from '@app/components/fileManager/FileInfoCard';
import CompactFileDetails from '@app/components/fileManager/CompactFileDetails';

interface FileDetailsProps {
  compact?: boolean;
}

const FileDetails: React.FC<FileDetailsProps> = ({
  compact = false
}) => {
  const { selectedFiles, onOpenFiles, modalHeight } = useFileManagerContext();
  const { t } = useTranslation();
  const [currentFileIndex, setCurrentFileIndex] = useState(0);
  const [isAnimating, setIsAnimating] = useState(false);

  // Get the currently displayed file
  const currentFile = selectedFiles.length > 0 ? selectedFiles[currentFileIndex] : null;
  const hasSelection = selectedFiles.length > 0;

  // Use IndexedDB hook for the current file
  const { thumbnail: currentThumbnail } = useIndexedDBThumbnail(currentFile);

  // Get thumbnail for current file
  const getCurrentThumbnail = () => {
    return currentThumbnail;
  };

  const handlePrevious = () => {
    if (isAnimating) return;
    setIsAnimating(true);
    setTimeout(() => {
      setCurrentFileIndex(prev => prev > 0 ? prev - 1 : selectedFiles.length - 1);
      setIsAnimating(false);
    }, 150);
  };

  const handleNext = () => {
    if (isAnimating) return;
    setIsAnimating(true);
    setTimeout(() => {
      setCurrentFileIndex(prev => prev < selectedFiles.length - 1 ? prev + 1 : 0);
      setIsAnimating(false);
    }, 150);
  };

  // Reset index when selection changes
  useEffect(() => {
    if (currentFileIndex >= selectedFiles.length) {
      setCurrentFileIndex(0);
    }
  }, [selectedFiles.length, currentFileIndex]);

  if (compact) {
    return (
      <CompactFileDetails
        currentFile={currentFile}
        thumbnail={getCurrentThumbnail()}
        selectedFiles={selectedFiles}
        currentFileIndex={currentFileIndex}
        numberOfFiles={selectedFiles.length}
        isAnimating={isAnimating}
        onPrevious={handlePrevious}
        onNext={handleNext}
        onOpenFiles={onOpenFiles}
      />
    );
  }

  return (
    <Stack gap="lg" h={`calc(${modalHeight} - 2rem)`} justify="flex-start">
      {/* Section 1: Thumbnail Preview */}
      <Box style={{ width: '100%', height: 'min(35vh, 280px)', textAlign: 'center', flexShrink: 0 }}>
        <FilePreview
          file={currentFile}
          thumbnail={getCurrentThumbnail()}
          showStacking={true}
          showNavigation={true}
          totalFiles={selectedFiles.length}
          isAnimating={isAnimating}
          onPrevious={handlePrevious}
          onNext={handleNext}
        />
      </Box>

      {/* Section 2: File Details */}
      <FileInfoCard
        currentFile={currentFile}
        modalHeight={modalHeight}
      />

      <Button
        size="md"
        onClick={onOpenFiles}
        disabled={!hasSelection}
        fullWidth
        style={{
          backgroundColor: hasSelection ? 'var(--btn-open-file)' : 'var(--mantine-color-gray-4)',
          color: 'white'
        }}
      >
        {selectedFiles.length > 1
          ? t('fileManager.openFiles', `Open ${selectedFiles.length} Files`)
          : t('fileManager.openFile', 'Open File')
        }
      </Button>
    </Stack>
  );
};

export default FileDetails;