import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { UploadCard, CLASSNAME, Props, CLASSNAME_COUNTS } from '../uploadCard';
import type { NrIngestionFile } from 'src/data/queries/getRecentNrIngestions/types';

describe('<UploadCard>', () => {
    const data = {
        lastModified: '2022-03-01T13:25:46.000Z',
        originalFilename: 'Doctor-Who.csv',
        id: '8060aa56-5838-4791-b558-d12ca5c5e095.csv',
        identity: { id: 'some-id', firstName: 'Allan', lastName: 'Moon' },
        successRows: 0,
        errorRows: 3,
        totalRows: 3,
        ingestionCompleted: true,
        successFileUrl: '',
        errorFileUrl:
            'https://qa-nr/ingestion/8060aa56-5838-4791-b558-d12ca5c5e095/error.csv',
    };

    const renderWrapper = (
        item: NrIngestionFile,
        type: 'historic' | 'active',
        props?: Partial<Props>
    ) =>
        renderInAppContext(
            <UploadCard item={item} uploadType={type} {...props} />
        );

    describe('when historic and errorRows exist', () => {
        test('renders default component', () => {
            const { container } = renderWrapper(data, 'historic');
            const component = container
                .getElementsByClassName(CLASSNAME)
                .item(0);

            expect(component).toBeVisible();
        });

        test('renders success and error count and download button', () => {
            const { container, getByTestId } = renderWrapper(data, 'historic');
            const successCount = getByTestId(`${CLASSNAME_COUNTS}-success`);
            const errorCount = getByTestId(`${CLASSNAME_COUNTS}-error`);
            const downloadButton = container
                .getElementsByClassName('UploadCard-report-button')
                .item(0);

            expect(successCount).toHaveTextContent('0Contributions created');
            expect(errorCount).toHaveTextContent('3Contributions failed');
            expect(downloadButton).toBeVisible();
        });
    });

    describe('when historic and no error rows', () => {
        const updatedData = { ...data, errorRows: 0, successRows: 3 };
        test('does not render download button', () => {
            const { queryByTestId } = renderWrapper(updatedData, 'historic');

            expect(
                queryByTestId('UploadCard-report-button')
            ).not.toBeInTheDocument();
        });
    });

    describe('when active', () => {
        const activeData = { ...data, ingestionCompleted: false };

        test('renders default component with loading spinner', () => {
            const { container, queryByTestId } = renderWrapper(
                activeData,
                'active'
            );
            const component = container
                .getElementsByClassName(CLASSNAME)
                .item(0);
            const spinner = container
                .getElementsByClassName('LoadingSpinner')
                .item(0);

            expect(component).toBeVisible();
            expect(spinner).toBeVisible();

            const successCount = queryByTestId(`${CLASSNAME_COUNTS}-success`);
            const errorCount = queryByTestId(`${CLASSNAME_COUNTS}-error`);

            expect(successCount).not.toBeInTheDocument();
            expect(errorCount).not.toBeInTheDocument();
        });
    });
});