import React, { useEffect, useMemo } from "react"; import { Button, Stack, Text } from "@mantine/core"; import { useTranslation } from "react-i18next"; import DownloadIcon from "@mui/icons-material/Download"; import { useEndpointEnabled } from "../hooks/useEndpointConfig"; import { useFileContext } from "../contexts/FileContext"; import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep"; import OperationButton from "../components/tools/shared/OperationButton"; import ErrorNotification from "../components/tools/shared/ErrorNotification"; import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator"; import ResultsPreview from "../components/tools/shared/ResultsPreview"; import SplitSettings from "../components/tools/split/SplitSettings"; import { useSplitParameters } from "../hooks/tools/split/useSplitParameters"; import { useSplitOperation } from "../hooks/tools/split/useSplitOperation"; interface SplitProps { selectedFiles?: File[]; onPreviewFile?: (file: File | null) => void; } const Split = ({ selectedFiles = [], onPreviewFile }: SplitProps) => { const { t } = useTranslation(); const { setCurrentMode } = useFileContext(); const splitParams = useSplitParameters(); const splitOperation = useSplitOperation(); // Endpoint validation const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled( splitParams.getEndpointName() ); useEffect(() => { splitOperation.resetResults(); onPreviewFile?.(null); }, [splitParams.mode, splitParams.parameters, selectedFiles]); const handleSplit = async () => { await splitOperation.executeOperation( splitParams.mode, splitParams.parameters, selectedFiles ); }; const handleThumbnailClick = (file: File) => { onPreviewFile?.(file); sessionStorage.setItem('previousMode', 'split'); setCurrentMode('viewer'); }; const handleSettingsReset = () => { splitOperation.resetResults(); onPreviewFile?.(null); setCurrentMode('split'); }; const hasFiles = selectedFiles.length > 0; const hasResults = splitOperation.downloadUrl !== null; const filesCollapsed = hasFiles; const settingsCollapsed = hasResults; const previewResults = useMemo(() => splitOperation.files?.map((file, index) => ({ file, thumbnail: splitOperation.thumbnails[index] })) || [], [splitOperation.files, splitOperation.thumbnails] ); return ( {/* Files Step */} {/* Settings Step */} {splitParams.mode && ( )} {/* Results Step */} {splitOperation.status && ( {splitOperation.status} )} {splitOperation.downloadUrl && ( )} ); } export default Split;