import React from 'react';
import { UploadArea } from '@theorchard/suite-components';
import { formatJsxMessage } from '@theorchard/suite-frontend';
import FileUploader from 'src/assets/svg/file-uploader.svg';
import SelectFileFromGoogleDrive from 'src/components/fileUpload/assetFileUpload/readyForAssetUpload/selectFileFromGoogleDrive';
import { ASSET_FILETYPES } from 'src/constants';
import { useCcmBulkCreateGoogleAssetUpload } from 'src/utils/features';
import type { FileRejection } from 'react-dropzone';
import type { ASSET_UPLOADING_STATUS } from 'src/constants';

const ReadyForAssetUpload = ({
    isRetry,
    onUploadFile,
    bulkSessionId,
    handleFileRejection,
    saveUnidentifiedAssets,
    setAssetUploadingStatus,
}: {
    isRetry: boolean;
    onUploadFile: (files: File[]) => void;
    bulkSessionId: string;
    handleFileRejection: (rejectedFiles: FileRejection[]) => void;
    saveUnidentifiedAssets: (unidentifiedAssets: string[]) => void;
    setAssetUploadingStatus: (status: ASSET_UPLOADING_STATUS) => void;
}) => (
    <UploadArea
        onUpload={onUploadFile}
        inputId="file-upload"
        accept={ASSET_FILETYPES}
        onDropRejected={handleFileRejection}
        multipleFileSelection={true}
    >
        <div
            className={`file-upload status-ready${
                isRetry ? ' retry-upload' : ''
            }`}
        >
            <div className="file-upload-info">
                <div className="file-upload-title">
                    {$t(
                        isRetry
                            ? 'bulkDigitalAudio.readyForAssetUpload.uploadCorrections'
                            : 'bulkDigitalAudio.readyForAssetUpload.connectAssetsTitle'
                    )}
                </div>
                <div className="file-upload-subtitle">
                    {formatJsxMessage(
                        'bulkDigitalAudio.fileUpload.uploadSubtitle',
                        {
                            link: ({ children }) => (
                                <span className="file-upload-link">
                                    {children}
                                </span>
                            ),
                        }
                    )}
                </div>
            </div>
            {useCcmBulkCreateGoogleAssetUpload() ? (
                <div className="file-upload-third-party">
                    <SelectFileFromGoogleDrive
                        bulkSessionId={bulkSessionId}
                        saveUnidentifiedAssets={saveUnidentifiedAssets}
                        setAssetUploadingStatus={setAssetUploadingStatus}
                    />
                </div>
            ) : (
                <img
                    className="file-uploader-image"
                    src={String(FileUploader)}
                    alt=""
                />
            )}
        </div>
    </UploadArea>
);

export default ReadyForAssetUpload;