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 AdjustmentsUploadRowCountErrorScreen = () => {
    const { adjustmentFile, resetToInitialState } =
        useContext(AdjustmentsContext);

    const getUploadAreaInfo = (): UploadAreaInfoProps => {
        return {
            illustration: 'uploadAreaError',
            title: 'Upload Failed',
            description:
                'File exceeds the 70,000 row limit. Please reduce the number of rows and try again.',
        };
    };

    return (
        <>
            <FullscreenModal.Title title="Upload Failed" />
            <FullscreenModal.Body>
                <Alert
                    variant="error"
                    testId="AdjustmentsRowCountErrorAlert"
                    text={
                        <span>
                            <b>
                                Failed to upload file &quot;
                                {adjustmentFile?.fileName}&quot; because it
                                exceeds the maximum allowed size of 70,000 rows.
                            </b>
                            <br />
                            Please reduce the number of rows and try again.
                        </span>
                    }
                />
                <UploadArea
                    disabled
                    inputId="browser-upload-failed"
                    info={getUploadAreaInfo()}
                    onUpload={() => {
                        return;
                    }}
                    testId="AdjustmentsUploadRowCountErrorArea"
                    variant="large"
                >
                    <Button
                        variant="primary"
                        onClick={() => resetToInitialState()}
                    >
                        <GlyphIcon name="upload" size={16} />
                        &nbsp;RE-UPLOAD FILE
                    </Button>
                </UploadArea>
            </FullscreenModal.Body>
        </>
    );
};