import React, { useContext } from 'react';
import {
    Alert,
    Button,
    FullscreenModal,
    UploadArea,
} from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';

import { AdjustmentsContext } from 'src/contexts/adjustments-context';

import type { UploadAreaInfoProps } from '@theorchard/suite-components';

export const AdjustmentsUploadFailedScreen = () => {
    const { adjustmentFile, resetToInitialState } =
        useContext(AdjustmentsContext);

    const getUploadAreaInfo = (): UploadAreaInfoProps => {
        return {
            illustration: 'uploadAreaError',
            title: 'Upload Failed',
            description: 'Internal Error',
        };
    };

    return (
        <>
            <FullscreenModal.Title title="Upload Failed" />
            <FullscreenModal.Body>
                <Alert
                    variant="error"
                    testId="AdjustmentsUploadFailedAlert"
                    text={
                        <span>
                            <b>
                                Failed to upload file &quot;
                                {adjustmentFile?.fileName}&quot;.
                            </b>
                            <br />
                            Internal Error
                        </span>
                    }
                />
                <UploadArea
                    disabled
                    inputId="browser-upload-failed"
                    info={getUploadAreaInfo()}
                    onUpload={() => {
                        return;
                    }}
                    testId="AdjustmentsUploadFailedArea"
                    variant="large"
                >
                    <Button
                        variant="primary"
                        onClick={() => resetToInitialState()}
                    >
                        <GlyphIcon name="upload" size={16} />
                        &nbsp;RE-UPLOAD FILE
                    </Button>
                </UploadArea>
            </FullscreenModal.Body>
        </>
    );
};

export default AdjustmentsUploadFailedScreen;