import React from 'react';
import { render } from '@testing-library/react';
import { TestData } from 'lib/test-utils/table';
import { GridTable } from '../../../base/table';
import { TableExtensions } from '../../../base/tableExtensions';
import { TableProps } from '../../../base/types';
import { TablePinnedRowsExtension } from '../tablePinnedRowsExtension';

TableExtensions.addExtension(TablePinnedRowsExtension);

describe('TablePinnedRowsExtension', () => {
    const pinnedRow1 = { name: 'row-1', value: 'row 1' };
    const pinnedRow2 = { name: 'row-4', value: 'row 4' };

    const data: TestData[] = [
        pinnedRow1,
        { name: 'row-2', value: 'row 2' },
        { name: 'row-3', value: 'row 3' },
        pinnedRow2,
    ];

    const pinnedRows = [pinnedRow1, pinnedRow2];

    const defaultProps: TableProps<TestData> = {
        rowKey: 'name',
        data,
        columnDefs: [{ name: 'name' }, { name: 'value' }],
    };

    const renderTable = (props: Partial<TableProps<TestData>> = {}) =>
        render(<GridTable {...defaultProps} {...props} />);

    test('renders pinned rows', () => {
        const { container } = renderTable({
            pinnedRows,
        });

        const rows = Array.from(container.querySelectorAll('.GridTable-row.sticky'));

        expect(rows).toHaveLength(pinnedRows.length);

        const [row1, row2] = rows;

        expect(row1.firstChild).toHaveStyle({ gridRow: '2 / span 1' });
        expect(row2.firstChild).toHaveStyle({ gridRow: '3 / span 1' });

        expect(row1).toHaveClass('GridTable-row');
        expect(row2).toHaveClass('GridTable-row', 'pinned-last');
        expect(row1).not.toHaveClass('pinned-last');
    });

    describe('with no "pinnedRows"', () => {
        test('does not render pinned rows', () => {
            const { getByText } = renderTable({ pinnedRows: [] });

            const rowCellContent = getByText(pinnedRow2.value, {
                selector: '.GridTable-row .GridTable-cell-text',
            });

            const rowCell = rowCellContent.parentElement;
            const row = rowCell?.parentElement;

            expect(rowCell?.style.gridRow).toEqual('5 / span 1');
            expect(row).not.toHaveClass('pinned-last', 'sticky');
        });
    });
});