import React, { useContext, useEffect } from 'react';
import {
    Alert,
    Button,
    Card,
    FullscreenModal,
    Tag,
} from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';

import { AbacusDownloadType } from 'src/apollo/definitions/globalTypes';
import { useAbacusDownloadFile } from 'src/apollo/queries/abacus-download';
import { AdjustmentsContext } from 'src/contexts/adjustments-context';

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

    const { data, getDownloadFile } = useAbacusDownloadFile(
        AbacusDownloadType.ADJUSTMENTS_FILE_ERROR_REPORT,
        String(adjustmentFile!.statementPeriodAdjustmentFileId)
    );

    useEffect(() => {
        if (data?.abacusDownload?.url)
            window.location.assign(data.abacusDownload.url);
    }, [data]);

    return (
        <>
            <FullscreenModal.Title title="Invalid Data" />
            <FullscreenModal.Body>
                <Alert
                    variant="error"
                    testId="AdjustmentsContentErrorsAlert"
                    text={
                        <span>
                            Please download the full report below to view
                            information about these validation errors, make the
                            required changes, and upload your file again.
                        </span>
                    }
                />
                <Page.Grid>
                    <Page.Col sm={12} md={6} lg={6}>
                        <Card suite>
                            <Card.Body>
                                <Tag
                                    className="AdjustmentsImportModal-Tag-Valid"
                                    testId="ValidRowsTag"
                                    text={adjustmentFile!.validRowCount!.toString()}
                                />
                                &nbsp;Valid Rows
                            </Card.Body>
                        </Card>
                    </Page.Col>
                    <Page.Col sm={12} md={6} lg={6}>
                        <Card suite>
                            <Card.Body>
                                <Tag
                                    className="AdjustmentsImportModal-Tag-Invalid"
                                    testId="InvalidRowsTag"
                                    text={adjustmentFile!.invalidRowCount!.toString()}
                                />
                                &nbsp;Invalid Rows
                            </Card.Body>
                        </Card>
                    </Page.Col>
                </Page.Grid>
                <div>
                    <Button
                        className="AdjustmentsImportModal-DownloadReportButton"
                        variant="primary"
                        onClick={async () => await getDownloadFile()}
                    >
                        <GlyphIcon name="download" size={16} />
                        &nbsp;DOWNLOAD ERROR REPORT
                    </Button>
                    <Button
                        className="AdjustmentsImportModal-ReuploadButton-InvalidScreen"
                        variant="secondary"
                        onClick={() => resetToInitialState()}
                    >
                        <GlyphIcon name="upload" size={16} />
                        &nbsp;RE-UPLOAD FILE
                    </Button>
                </div>
            </FullscreenModal.Body>
        </>
    );
};

export default AdjustmentsUploadContentErrorScreen;