import React from 'react';
import { render } from '@testing-library/react';
import { formatMessage } from '@theorchard/suite-i18n';
import { TestData } from 'lib/test-utils/table';
import { GridTable } from '../../../base/table';
import { TableExtensions } from '../../../base/tableExtensions';
import { TableProps } from '../../../base/types';
import { TableSourceExtension } from '../tableSourceExtension';

TableExtensions.addExtension(TableSourceExtension);

describe('TableSourceExtension', () => {
    const data: TestData[] = [
        { name: 'test1', value: 2 },
        { name: 'test2', value: 1 },
    ];

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

    describe('with "showSource" true', () => {
        test('renders "Source" button in header', () => {
            const { getByText } = renderTable({
                showSource: true,
            });

            const element = getByText(formatMessage('table_source'), {
                selector: '.GridTable-header-right .btn',
            });

            expect(element).toBeInTheDocument();
        });

        test('renders "Source" button with custom trigger component', () => {
            const testId = 'custom-sources-btn';

            const { getByTestId } = renderTable({
                showSource: true,
                SourceTriggerComponent: () => <button data-testid={testId}>Custom Trigger</button>,
            });

            const element = getByTestId(testId);

            expect(element).toBeInTheDocument();
        });
    });
});