import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import * as accountDetailResponse from 'src/__fixtures__/graphql/account-detail-response.json';
import PayeeNameHistory, {
    type PaymentHistoryItem,
    type PayeeNameHistoryProps,
} from 'src/components/account-detail/payee-name-history';

const payeeResponse = accountDetailResponse.abacusAccount.accountPayee;
const historyResponse = accountDetailResponse.abacusAccount.accountPayeeHistory;
const noHistoryResponse: PaymentHistoryItem[] = [];

describe('<PayeeNameHistory>', () => {
    const defaultProps: PayeeNameHistoryProps = {
        accountPayee: payeeResponse,
        accountPayeeHistory: historyResponse,
    };

    const render = (props: PayeeNameHistoryProps) =>
        renderInAppContext(<PayeeNameHistory {...props} />);

    it('renders when there is a payee name history', () => {
        render(defaultProps);
        historyResponse.forEach(item =>
            expect(screen.getAllByText(item.payoneerPayeeName)).toBeTruthy()
        );
    });

    it('does not render when there is no payee name history', () => {
        const props = {
            accountPayee: payeeResponse,
            accountPayeeHistory: noHistoryResponse,
        };
        render(props);
        expect(screen.getByText('There are no prior entries')).toBeTruthy();
    });

    it('consolidates sequential entires with same payee name', () => {
        const responseToConsolidate = [
            {
                accountPayeeHistoryId: '10',
                lastModified: '2022-02-25',
                payoneerPayeeName: 'Test Payee',
            },
            {
                accountPayeeHistoryId: '9',
                lastModified: '2022-02-20',
                payoneerPayeeName: 'Test Payee',
            },
            {
                accountPayeeHistoryId: '8',
                lastModified: '2022-02-15',
                payoneerPayeeName: 'Test Payee',
            },
        ];
        const props = {
            accountPayee: payeeResponse,
            accountPayeeHistory: responseToConsolidate,
        };
        render(props);
        expect(screen.getByText('Test Payee')).toBeTruthy();
    });
});