import React from 'react';
import { formatMessage } from '@theorchard/suite-frontend';
import BulkSessionsCard from 'src/components/bulkSessionsCard';
import { ButtonType, IconType } from 'src/components/bulkSessionsCard/types';

interface AssetUploadCompleteCardProps {
    totalProducts: number;
    createdAt: string;
    fileName: string;
    sessionId: string;
    failedProductUploads: number | null;
}

const AssetUploadCompleteCard = ({
    totalProducts,
    createdAt,
    fileName,
    sessionId,
    failedProductUploads,
}: AssetUploadCompleteCardProps) => {
    const successCount = totalProducts - (failedProductUploads || 0);
    if (failedProductUploads && failedProductUploads > 0)
        return (
            <BulkSessionsCard
                titleText={$t(
                    'bulkDigitalAudioSidecar.assetUploadCompleteCard.failureTitle'
                )}
                bodyText={formatMessage(
                    'bulkDigitalAudioSidecar.assetUploadCompleteCard.failureBody',
                    { successCount, failedProductUploads }
                )}
                iconType={IconType.Warning}
                buttonType={ButtonType.View}
                createdAt={createdAt}
                fileName={fileName}
                sessionId={sessionId}
            />
        );
    else
        return (
            <BulkSessionsCard
                titleText={$t(
                    'bulkDigitalAudioSidecar.assetUploadCompleteCard.successTitle'
                )}
                bodyText={formatMessage(
                    'bulkDigitalAudioSidecar.assetUploadCompleteCard.successBody',
                    { count: successCount }
                )}
                iconType={IconType.Success}
                buttonType={ButtonType.View}
                createdAt={createdAt}
                fileName={fileName}
                sessionId={sessionId}
            />
        );
};

export default AssetUploadCompleteCard;