import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import {
    SectionPresentationalGroupItem,
    SectionPresentationalGroupItemPropTypes,
} from '../contract-term-details-presentational-group-item';

jest.mock('@theorchard/suite-icons', () => ({
    GlyphIcon: (props: any) => <span data-testid="mockGlyphIcon" {...props} />,
    Illustration: (props: any) => (
        <span data-testid="mockIllustration" {...props} />
    ),
}));

const setup = (
    overrideProps?: Partial<SectionPresentationalGroupItemPropTypes>
) => {
    const defaultProps: SectionPresentationalGroupItemPropTypes = {
        detail: {
            presentationalGroup: {
                name: 'Fraudulent Streams',
                id: 'FS',
                conditions: [],
                exceptions: [],
                defaultLabelShare: 10,
            },
        },
        detailIndex: 1,
        contractTermFormattedDataListIndex: 1,
        lastGroup: true,
    };

    const props = { ...defaultProps, ...overrideProps };

    return render(<SectionPresentationalGroupItem {...props} />);
};

describe('<SectionPresentationalGroupItem />', () => {
    it('renders without crashing', () => {
        const { container } = setup();
        expect(container).toBeInTheDocument();
    });

    describe('when contractTermFormattedDataList has data', () => {
        const mockData = {
            presentationalGroup: {
                name: 'Fraudulent Streams',
                id: '19',
                conditions: [
                    {
                        transactionType: ['FS'],
                        service: ['store'],
                        country: ['US'],
                        labelShare: 10,
                        priority: 1,
                        id: 1,
                    },
                    {
                        transactionType: ['FP'],
                        service: ['B'],
                        country: [
                            'US',
                            'GB',
                            'AU',
                            'NZ',
                            'FR',
                            'ES',
                            'PL',
                            'CA',
                            'MX',
                            'CN',
                            'JP',
                        ],
                        labelShare: 15,
                        priority: 2,
                        id: 2,
                    },
                ],
                exceptions: [],
                defaultLabelShare: 10,
            },
        };

        beforeEach(() => {
            setup({ detail: mockData });
        });

        it('renders Section items for each detail in each term', () => {
            expect(screen.getByText(/Fraudulent Streams/i)).toBeInTheDocument();
        });

        it('renders correct table headers', async () => {
            expect(screen.getAllByText('#')[0]).toBeInTheDocument();
            expect(
                screen.getAllByText('Transaction Type')[0]
            ).toBeInTheDocument();
            expect(screen.getAllByText('Country')[0]).toBeInTheDocument();
            expect(screen.getAllByText('Service')[0]).toBeInTheDocument();
            expect(screen.getAllByText(`Label's Share`)[0]).toBeInTheDocument();
        });

        it('renders hidden count', async () => {
            const countries =
                screen.getAllByTestId('country-cell')[1].innerHTML;
            expect(countries).toContain(
                'US, GB, AU, NZ, FR, ES, PL, CA, MX, CN,'
            );
            expect(countries).not.toContain('JP');
            const hiddenCount = screen.getAllByTestId(
                'ContractTermsConditionsGridTableHiddenCount'
            )[0];
            expect(hiddenCount.innerHTML).toContain('+1');
        });

        it('shows more when hidden count clicked', async () => {
            const hiddenCountButton =
                screen.getAllByTestId('HiddenCount-button')[0];
            fireEvent.click(hiddenCountButton);
            const hiddenCount = screen.getAllByTestId(
                'ContractTermsConditionsGridTableHiddenCount'
            )[0];
            const countries =
                screen.getAllByTestId('country-cell')[1].innerHTML;
            expect(countries).toContain(
                'US, GB, AU, NZ, FR, ES, PL, CA, MX, CN, JP'
            );
            expect(hiddenCount.innerHTML).not.toContain('+1');
        });

        it('displays the conditions in a table', () => {
            const allIdCells = screen.getAllByTestId('id-cell');
            const allTransactionTypeCells = screen.getAllByTestId(
                'transactionType-cell'
            );
            const allServiceCells = screen.getAllByTestId('service-cell');
            const allCountryCells = screen.getAllByTestId('country-cell');
            const allLabelShareCells = screen.getAllByTestId('labelshare-cell');

            // Check first row in first table
            expect(allIdCells[0].innerHTML).toContain('1');
            expect(allTransactionTypeCells[0].innerHTML).toContain('FS');
            expect(allServiceCells[0].innerHTML).toContain('store');
            expect(allCountryCells[0].innerHTML).toContain('US');
            expect(allLabelShareCells[0].innerHTML).toContain('10%');

            // Check second row in first table
            expect(allIdCells[1].innerHTML).toContain('2');
            expect(allTransactionTypeCells[1].innerHTML).toContain('FP');
            expect(allServiceCells[1].innerHTML).toContain('B');
            expect(allCountryCells[1].innerHTML).toContain(
                'US, GB, AU, NZ, FR, ES, PL, CA, MX, CN,'
            );
            expect(allLabelShareCells[1].innerHTML).toContain('15%');
        });
    });
});