import React from 'react';
import * as apollo from '@apollo/client';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import * as uploadTokenQuery from 'src/data/queries/nrUploadToken/nrUploadToken';
import * as featureFlags from 'src/utils/features';
import UploadBox from '../uploadBox';

describe('<UploadBox>', () => {
    const mockHandleSuccess = jest.fn();
    const mockHandleErrors = jest.fn();
    const uploadTokenData = {
        credentials: {
            sessionToken: 'session-token',
            expiration: 'expiration-date',
            accessKeyId: 'AWSKEY',
            secretAccessKey: 'dw/secret',
        },
        filename: 'abcdef123456-214892148929481',
        bucket: 'neighbouring-rights',
    };

    beforeEach(() => {
        jest.spyOn(uploadTokenQuery, 'useLazyUploadToken').mockReturnValue([
            jest.fn(),
            {
                data: { nrUploadToken: uploadTokenData },
            } as apollo.QueryResult,
        ]);
        jest.spyOn(featureFlags, 'useUpload').mockReturnValue(true);
    });

    afterEach(() => {
        jest.restoreAllMocks();
    });

    const renderComponent = () =>
        renderInAppContext(
            <UploadBox
                accept={['.csv', 'text/csv', 'application/csv']}
                handleFileErrors={mockHandleErrors}
                handleS3Uploaded={mockHandleSuccess}
            />
        );

    test('renders upload box with a browse button', () => {
        const { container } = renderComponent();
        expect(container.querySelector('input')).toBeInTheDocument();
        expect(
            container.querySelector('.UploadBox-browse-link')
        ).toBeInTheDocument();
    });

    test('shows template CSV link', () => {
        renderComponent();

        const linkOutroText = screen.getByTestId('templateLink');
        expect(linkOutroText.innerHTML).toBe(
            $t('neighbouringRights.uploadBox.templateLink')
        );
    });

    describe('Functionality controlled by FF', () => {
        beforeEach(() => {
            jest.spyOn(featureFlags, 'useUpload').mockReturnValue(false);
        });
        test('does not allow upload if FF is set', () => {
            renderComponent();

            const hidden = screen.getByTestId('hide-uploading-message');
            expect(hidden.innerHTML).toBe(
                $t(`neighbouringRights.uploadBox.hideUpload`)
            );
        });
    });
});