import React, { useState, useEffect } from 'react'; import { Stack, Button } from '@mantine/core'; import { useTranslation } from 'react-i18next'; import { useIndexedDBThumbnail } from '../../hooks/useIndexedDBThumbnail'; import { useFileManagerContext } from '../../contexts/FileManagerContext'; import FilePreview from './FilePreview'; import FileInfoCard from './FileInfoCard'; import CompactFileDetails from './CompactFileDetails'; interface FileDetailsProps { compact?: boolean; } const FileDetails: React.FC = ({ 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; const hasMultipleFiles = selectedFiles.length > 1; // 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 React.useEffect(() => { if (currentFileIndex >= selectedFiles.length) { setCurrentFileIndex(0); } }, [selectedFiles.length, currentFileIndex]); if (compact) { return ( ); } return ( {/* Section 1: Thumbnail Preview */} {/* Section 2: File Details */} ); }; export default FileDetails;