import React, { useContext, useEffect } from 'react';
import {
    Alert,
    Button,
    FullscreenModal,
    UploadArea,
} from '@theorchard/suite-components';
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';

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

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

    const { data, getDownloadFile } = useAbacusDownloadFile(
        AbacusDownloadType.ADJUSTMENTS_TEMPLATE,
        '0'
    );

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

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

    return (
        <>
            <FullscreenModal.Title title="Upload Failed" />
            <FullscreenModal.Body>
                <Alert
                    variant="error"
                    testId="AdjustmentsFormatErrorFormatAlert"
                    text={
                        <b>
                            Failed to upload file &quot;
                            {adjustmentFile?.fileName}
                            &quot; due to wrong file template. If this issue
                            persists, please contact support via{' '}
                            <a
                                href="https://sonymusic.enterprise.slack.com/archives/C041MDL16UT"
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                Slack
                            </a>{' '}
                            or{' '}
                            <a href="mailto:abacus-squad@sonymusic-pde.com">
                                email
                            </a>
                            .
                        </b>
                    }
                />
                <UploadArea
                    disabled
                    inputId="browser-upload-failed"
                    info={getUploadAreaInfo()}
                    onUpload={() => {
                        return;
                    }}
                    testId="AdjustmentsUploadFormatErrorFormatArea"
                    variant="large"
                >
                    <div className="AdjustmentsImportModal-BadTemplateMessage">
                        <span>
                            The file &quot;{adjustmentFile?.fileName}&quot;
                            doesn&apos;t match the required template.
                            <br />
                            Please verify you&apos;re using the correct template
                            or&nbsp;
                            <a
                                className="AdjustmentsImportModal-BadTemplateMessage-DownloadButton"
                                onClick={async () => await getDownloadFile()}
                            >
                                download the current here
                            </a>
                            .
                        </span>
                    </div>
                    <Button
                        variant="primary"
                        onClick={() => resetToInitialState()}
                    >
                        <GlyphIcon name="upload" size={16} />
                        &nbsp;RE-UPLOAD FILE
                    </Button>
                </UploadArea>
            </FullscreenModal.Body>
        </>
    );
};

export default AdjustmentsUploadFormatErrorScreen;