import React from 'react';
import {
    ErrorMessage,
    LoadingSpinner,
    UploadArea,
} from '@theorchard/suite-components';
import { formatJsxMessage } from '@theorchard/suite-frontend';
import FileUploader from 'src/assets/svg/file-uploader.svg';
import { METADATA_FILETYPES, METADATA_UPLOADING_STATUS } from 'src/constants';
import type { FileRejection } from 'react-dropzone';

const ReadyForMetadataUpload = ({
    metadataUploadingStatus,
    onUploadFile,
    handleFileRejection,
    isVendorUuidLoading = false,
}: {
    metadataUploadingStatus: METADATA_UPLOADING_STATUS;
    onUploadFile: (files: File[]) => void;
    handleFileRejection: (rejectedFile: FileRejection[]) => void;
    isVendorUuidLoading?: boolean;
}) => {
    // Show loading spinner without UploadArea to prevent uploads
    if (isVendorUuidLoading) {
        return (
            <div className="file-upload status-ready">
                <div className="file-upload-info">
                    <LoadingSpinner />
                </div>
            </div>
        );
    }

    return (
        <UploadArea
            onUpload={onUploadFile}
            inputId="file-upload"
            accept={METADATA_FILETYPES}
            onDropRejected={handleFileRejection}
            multipleFileSelection={false}
        >
            <div className="file-upload status-ready">
                <div className="file-upload-info">
                    {metadataUploadingStatus ==
                    METADATA_UPLOADING_STATUS.FAILURE ? (
                        <ErrorMessage size="sm" illustration="dataError">
                            {formatJsxMessage(
                                'bulkDigitalAudio.readyForMetadataUpload.uploadErrorSubtitle',
                                {
                                    link: ({ children }) => (
                                        <span className="file-upload-link">
                                            {children}
                                        </span>
                                    ),
                                }
                            )}
                        </ErrorMessage>
                    ) : (
                        <>
                            <div className="file-upload-title">
                                {$t(
                                    'bulkDigitalAudio.readyForMetadataUpload.uploadMetadataTitle'
                                )}
                            </div>
                            <div className="file-upload-subtitle">
                                {formatJsxMessage(
                                    'bulkDigitalAudio.fileUpload.uploadSubtitle',
                                    {
                                        link: ({ children }) => (
                                            <span className="file-upload-link">
                                                {children}
                                            </span>
                                        ),
                                    }
                                )}
                            </div>
                            <img
                                className="file-uploader-image"
                                src={String(FileUploader)}
                                alt=""
                            />
                        </>
                    )}
                </div>
            </div>
        </UploadArea>
    );
};

export default ReadyForMetadataUpload;