import { Box, LinearProgressBar, Text } from '@wix/design-system';
import React, { useMemo } from 'react';
import { observer } from 'mobx-react-lite';
function _ImportStepProgress({ state }) {
    const { processedCount, totalCount, isBackingUp, result, translate: t, importStatus, errorHandler, } = state;
    const progress = totalCount > 0
        ? Math.min(100, Math.round((processedCount / totalCount) * 100))
        : 0;
    const hasFailures = result != null && result.failed > 0;
    const errorMessage = useMemo(() => importStatus.error
        ? errorHandler.getResolvedError?.(importStatus.error)?.message
        : null, [importStatus.error, errorHandler]);
    return (React.createElement(Box, { direction: "vertical", gap: "SP2", width: "100%" },
        React.createElement(LinearProgressBar, { value: progress, showProgressIndication: true, dataHook: "import-progress-bar" }),
        React.createElement(Text, { size: "small", dataHook: "import-progress-label" }, isBackingUp && !errorMessage
            ? t('cairo.import.backupDescription')
            : t('cairo.import.progressLabel', {
                processed: processedCount,
                total: totalCount,
            })),
        hasFailures && (React.createElement(Text, { size: "small", skin: "error", dataHook: "import-partial-error" }, t('cairo.import.partialSuccess', {
            succeeded: result.succeeded,
            failed: result.failed,
        }))),
        errorMessage && (React.createElement(Text, { size: "small", skin: "error", dataHook: "import-error-message" }, errorMessage))));
}
export const ImportStepProgress = observer(_ImportStepProgress);
//# sourceMappingURL=ImportStepProgress.js.map