import React, { useState } from 'react';
import type { UploadAreaInfoProps } from '@theorchard/suite-components';
import {
    Alert,
    FullscreenModal,
    UploadArea,
} from '@theorchard/suite-components';

enum FileErrorCode {
    INVALID_FILE = 'INVALID_FILE',
    TOO_MANY_FILES = 'TOO_MANY_FILES',
}

export const BulkEntityEditUploadFileScreen = (props: {
    onFileSelected: (file: File) => void;
}) => {
    const [fileError, setFileError] = useState<FileErrorCode | null>(null);

    const getUploadAreaInfo = (): UploadAreaInfoProps => {
        switch (fileError) {
            case FileErrorCode.INVALID_FILE:
                return {
                    illustration: 'uploadAreaError',
                    title: 'Invalid File',
                    description:
                        'Drag and drop or browse from your computer to re-upload a valid file.',
                };
            case FileErrorCode.TOO_MANY_FILES:
                return {
                    illustration: 'uploadAreaError',
                    title: 'Upload Failed',
                    description:
                        'Drag and drop or browse from your computer to re-upload a single file.',
                };
            default:
                return {
                    illustration: 'uploadArea',
                    title: 'Upload Your File',
                    description: 'Drag and drop or browse from your computer.',
                };
        }
    };

    const renderAlert = () => {
        let errorMessage = '';
        switch (fileError) {
            case FileErrorCode.INVALID_FILE:
                errorMessage =
                    "You've tried to upload an invalid file. Please select a single .xlsx or .csv file and try uploading again.";
                break;
            case FileErrorCode.TOO_MANY_FILES:
                errorMessage =
                    "You've added too many files. Please select a single .xlsx or .csv file and try uploading again.";
                break;
            default:
                return null;
        }

        return (
            <Alert
                testId="UploadAlert"
                variant="error"
                text={
                    <span>
                        <b>Upload Failed.</b>
                        &nbsp;{errorMessage}
                    </span>
                }
            />
        );
    };

    return (
        <>
            <FullscreenModal.Title title="Upload File">
                You can upload an XLSX or CSV.&nbsp;
            </FullscreenModal.Title>
            <FullscreenModal.Body>
                {renderAlert()}
                <UploadArea
                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv"
                    info={getUploadAreaInfo()}
                    inputId="browser-upload"
                    multipleFileSelection={false}
                    onUpload={async acceptedFiles => {
                        if (acceptedFiles.length === 1) {
                            props.onFileSelected(acceptedFiles[0]);
                        } else if (acceptedFiles.length === 0) {
                            setFileError(FileErrorCode.INVALID_FILE);
                        } else {
                            setFileError(FileErrorCode.TOO_MANY_FILES);
                        }
                    }}
                    testId="AdjustmentsUploadArea"
                    variant="large"
                />
            </FullscreenModal.Body>
        </>
    );
};

export default BulkEntityEditUploadFileScreen;