import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import PaymentGroupOverview, {
    type PaymentGroupOverviewProps,
} from 'src/components/payment-group-detail/payment-group-overview';
import { getCurrencyLabel } from 'src/utils/currency';

describe('<PaymentGroupOverview>', () => {
    const mockPaymentGroupDetails = [
        {
            accountCount: 2,
            currencyCode: 'USD',
            currencyTotal: '2000.0',
        },
        {
            accountCount: 1,
            currencyCode: 'EUD',
            currencyTotal: '1000.0',
        },
    ];

    const render = (props: PaymentGroupOverviewProps) =>
        renderInAppContext(<PaymentGroupOverview {...props} />);

    const props: PaymentGroupOverviewProps = {
        isPaymentOverviewLoading: false,
        paymentOverviewDetails: mockPaymentGroupDetails,
    };

    it('renders a overview details of a payment group', () => {
        render(props);
        const paymentOverviewTable = screen.getByRole('table');
        expect(paymentOverviewTable.textContent).toContain('Currency');
        expect(paymentOverviewTable.textContent).toContain('Accounts');
        expect(paymentOverviewTable.textContent).toContain('Amount');
    });

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