import React from 'react';
import { render, screen } from '@testing-library/react';
import AccountPaymentHistory from '../account-payment-history';

jest.mock('src/components/payments-list/payment-search', () => ({
    __esModule: true,
    default: ({ accountConfig }: { accountConfig: unknown }) => (
        <div
            data-testid="payment-search"
            data-config={JSON.stringify(accountConfig)}
        />
    ),
}));

const getConfig = () =>
    JSON.parse(
        screen.getByTestId('payment-search').getAttribute('data-config') ?? '{}'
    );

describe('<AccountPaymentHistory>', () => {
    it('pins the search to the account and maps contracts to dropdown options', () => {
        render(
            <AccountPaymentHistory
                accountId="123"
                contracts={[
                    { contractId: '200001', contractName: 'Contract A' },
                    { contractId: '200002', contractName: 'Contract B' },
                ]}
            />
        );

        const config = getConfig();
        expect(config.accountId).toBe('123');
        expect(config.contractOptions).toEqual([
            { label: 'Contract A - 200001', value: '200001' },
            { label: 'Contract B - 200002', value: '200002' },
        ]);
    });

    it('renders with no contract options when the account has no contracts', () => {
        render(<AccountPaymentHistory accountId="123" />);

        const config = getConfig();
        expect(config.accountId).toBe('123');
        expect(config.contractOptions).toEqual([]);
    });
});