import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import PaymentGroupProgramCurrencyTotals, {
    type PaymentGroupProgramCurrencyTotalsPropTypes,
} from 'src/components/payment-group-detail/payment-group-program-currency-totals';
import { getCurrencyLabel } from 'src/utils/currency';

describe('<PaymentGroupProgramCurrencyTotals>', () => {
    const mockProgramCurrencyTotals = [
        {
            accountCount: 2,
            currencyCode: 'GBP',
            currencyTotal: '1385653.56',
            paymentEntityName: 'AWAL Digital Limited (UK)',
            payoneerProgramId: '100176930',
        },
        {
            accountCount: 4,
            currencyCode: 'USD',
            currencyTotal: '51677.20',
            paymentEntityName: 'AWAL Digital Limited (UK)',
            payoneerProgramId: '100176990',
        },
    ];

    const render = (props: PaymentGroupProgramCurrencyTotalsPropTypes) =>
        renderInAppContext(<PaymentGroupProgramCurrencyTotals {...props} />);

    const props = {
        programCurrencyTotals: mockProgramCurrencyTotals,
    };

    it('renders PaymentGroupProgramCurrencyTotals component', () => {
        render(props);
        const programCurrencyTotalsTable = screen.getByRole('table');
        expect(programCurrencyTotalsTable.textContent).toContain(
            'Payment Entity'
        );
        expect(programCurrencyTotalsTable.textContent).toContain('Program ID');
        expect(programCurrencyTotalsTable.textContent).toContain(
            'Payment Currency'
        );
        expect(programCurrencyTotalsTable.textContent).toContain(
            'Total Payment Amount'
        );
    });

    it('formats the currency column', () => {
        render(props);
        const value = screen.getByText(
            getCurrencyLabel(mockProgramCurrencyTotals[0].currencyCode) ?? ''
        );
        expect(value).toBeDefined();
    });
});