import React from 'react';
import { LoadingSpinner } from '@theorchard/suite-components';
import { ASSET_UPLOADING_STATUS } from 'src/constants';

const AssetUploadInProgress = ({
    assetUploadingStatus,
    assetUploadingPercentage,
    isRetry,
}: {
    assetUploadingStatus: ASSET_UPLOADING_STATUS;
    assetUploadingPercentage: number;
    isRetry: boolean;
}) => {
    const isTransferring =
        assetUploadingStatus === ASSET_UPLOADING_STATUS.TRANSFERRING;
    const isUploading =
        assetUploadingStatus === ASSET_UPLOADING_STATUS.UPLOADING;
    const isValidating =
        assetUploadingStatus === ASSET_UPLOADING_STATUS.VALIDATING;

    const showPercentage =
        isUploading || (isTransferring && assetUploadingPercentage > 0);

    return (
        <div
            className={`file-upload in-progress${
                isRetry ? ' retry-upload' : ''
            }`}
        >
            <div className="file-upload-info">
                <div className="file-upload-title">
                    {isUploading ||
                        (isTransferring &&
                            !showPercentage &&
                            $t(
                                'bulkDigitalAudio.assetUploadInProgress.uploadingAssetsTitle'
                            )) ||
                        (isTransferring &&
                            $t(
                                'bulkDigitalAudio.assetUploadInProgress.transferringAssetsTitle'
                            )) ||
                        (isValidating &&
                            $t(
                                'bulkDigitalAudio.assetUploadInProgress.validatingAssetsTitle'
                            ))}
                </div>
                <div className="file-upload-subtitle">
                    {isUploading ||
                        (isTransferring &&
                            !showPercentage &&
                            $t(
                                'bulkDigitalAudio.assetUploadInProgress.uploadingAssetsSubtitle'
                            )) ||
                        (isTransferring &&
                            $t(
                                'bulkDigitalAudio.assetUploadInProgress.transferringAssetsSubtitle'
                            )) ||
                        (isValidating &&
                            $t(
                                'bulkDigitalAudio.assetUploadInProgress.validatingAssetsSubtitle'
                            ))}
                </div>
            </div>
            <div className="file-upload-spinner">
                <LoadingSpinner
                    show
                    percentage={
                        showPercentage ? assetUploadingPercentage : undefined
                    }
                    size={80}
                />
            </div>
        </div>
    );
};

export default AssetUploadInProgress;