import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { createVatInvoice } from 'lib/factories/statementPeriod';
import { VAT_DOCS_FAILURE_REASON } from 'src/constants';
import { INVOICE_STATUS } from 'src/enum';
import * as exportCsvUtil from 'src/utils/export-csv';
import {
    FailedVatDocsModal,
    TERM_RETRY_BUTTON,
    TEST_ID_FAILED_DOCS_MODAL,
} from '../failed-vat-docs-modal';

jest.mock('file-saver', () => ({ saveAs: jest.fn() }));
describe('<GenerateVatDocs>', () => {
    const statementPeriodId = '1';

    const doc1 = createVatInvoice({
        statementPeriodId: statementPeriodId,
        accountId: '1',
        accountName: 'Account 1',
        failureReason: VAT_DOCS_FAILURE_REASON.SYSTEM_ERROR,
        statementAttachmentStatus: INVOICE_STATUS.ERROR,
    });

    const doc2 = createVatInvoice({
        statementPeriodId: statementPeriodId,
        accountId: '1',
        accountName: 'Account 1',
        failureReason: VAT_DOCS_FAILURE_REASON.MISSING_TAX_INFO,
        statementAttachmentStatus: INVOICE_STATUS.ERROR,
    });

    const doc3 = createVatInvoice({
        statementPeriodId: statementPeriodId,
        accountId: '1',
        accountName: 'Account 1',
        failureReason: VAT_DOCS_FAILURE_REASON.MISSING_TAX_INFO,
        statementAttachmentStatus: INVOICE_STATUS.ERROR,
    });

    const doc4 = createVatInvoice({
        statementPeriodId: statementPeriodId,
        accountId: '1',
        accountName: 'Account 1',
        failureReason: VAT_DOCS_FAILURE_REASON.MISSING_TAX_INFO,
        statementAttachmentStatus: INVOICE_STATUS.ERROR,
    });

    const doc5 = createVatInvoice({
        statementPeriodId: statementPeriodId,
        accountId: '2',
        accountName: 'Account 2',
        failureReason: VAT_DOCS_FAILURE_REASON.SYSTEM_ERROR,
        statementAttachmentStatus: INVOICE_STATUS.ERROR,
    });

    const defaultProps = {
        toggleModal: jest.fn(),
        isOpen: true,
        failedDocs: [doc1, doc2, doc3, doc4, doc5],
        statementPeriodName: 'Statement 1',
        paymentEntityName: 'KNR',
        onRetryVatDocs: jest.fn(),
    };

    it('renders with correct details', () => {
        renderInAppContext(<FailedVatDocsModal {...defaultProps} />);

        expect(
            screen.getByTestId(`${TEST_ID_FAILED_DOCS_MODAL}-count-tag`)
                .textContent
        ).toBe('5');

        expect(
            screen.getByText(defaultProps.statementPeriodName)
        ).toBeInTheDocument();
        expect(
            screen.getByText(defaultProps.paymentEntityName)
        ).toBeInTheDocument();
    });

    describe('failed docs aggregated by account table', () => {
        it('renders with correct pagination values', () => {
            renderInAppContext(<FailedVatDocsModal {...defaultProps} />);

            const paginationButton = screen.getByRole('button', {
                name: '1 - 3 of 3',
            });

            expect(paginationButton).toBeInTheDocument();
        });

        it('renders with correct data', () => {
            renderInAppContext(<FailedVatDocsModal {...defaultProps} />);

            const bodyText: string[] = [];

            document
                .querySelectorAll('div.GridTable-cell')
                .forEach((body: any) => bodyText.push(body.textContent));

            expect(bodyText).toEqual([
                'Account 1' + '1',
                '1',
                'System Error',
                'Account 1' + '1',
                '3',
                'Missing tax information',
                'Account 2' + '2',
                '1',
                'System Error',
            ]);
        });
    });

    it('calls onRetryVatDocs function on "retry vat generation" click', () => {
        renderInAppContext(<FailedVatDocsModal {...defaultProps} />);

        const retryButton = screen.getByText(TERM_RETRY_BUTTON);

        fireEvent.click(retryButton);

        expect(defaultProps.onRetryVatDocs).toHaveBeenCalled();
    });

    it('exports correct data in csv', () => {
        jest.spyOn(exportCsvUtil, 'exportCsv');

        renderInAppContext(<FailedVatDocsModal {...defaultProps} />);

        const exportButton = screen.getByRole('button', { name: 'Export' });

        fireEvent.click(exportButton);

        const expectedFileName = `Failed_VAT_docs_${defaultProps.paymentEntityName}_${defaultProps.statementPeriodName}`;

        const csvData = [
            {
                '# of failed documents': '1',
                'Account Id': '1',
                'Account Name': 'Account 1',
                'Failure reason': 'System Error',
            },
            {
                '# of failed documents': '3',
                'Account Id': '1',
                'Account Name': 'Account 1',
                'Failure reason': 'Missing tax information',
            },
            {
                '# of failed documents': '1',
                'Account Id': '2',
                'Account Name': 'Account 2',
                'Failure reason': 'System Error',
            },
        ];

        expect(exportCsvUtil.exportCsv).toHaveBeenCalledWith(
            csvData,
            expectedFileName
        );
    });
});