import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { waitForElement } from '@testing-library/react';

import renderWithProvider from 'lib/testing/provider';
import { CLASSNAME_CONTENT } from 'src/components/compareSection';
import { STREAMS } from 'src/constants/graphs';
import { PAST28 } from 'src/constants/periods';

import { TERM_TRIGGER_LABEL as DATASOURCES_TERM_TRIGGER } from '../../sourcesStatus/SourcesStatus';
import { TEST_ID as CHART_TEST_ID } from '../chart/Chart';

import StreamsBySubscription, {
    Content, TERM_HEADER
} from '../StreamsBySubscription';

describe('<StreamsBySubscription>', () => {
    test('Does not show header if no data', async () => {
        const container = await renderWithProvider(StreamsBySubscription);

        const headerTitle = container.queryByText(TERM_HEADER);
        expect(headerTitle).toBeNull();
    });

    test('does not show content by default', async () => {
        const { container } = await renderWithProvider(StreamsBySubscription);

        const content = container.getElementsByClassName(CLASSNAME_CONTENT).item(0);
        expect(content).toBeNull();
    });
});

describe('Content', () => {
    const ISRC1 = 'ISRCCODE1';
    const ISRC2 = 'ISRCCODE2';

    const renderMocked = async (
        ids: string[], countries: string[] = [], stores: number[] = [], potMetric: string = STREAMS, datePeriod: string = PAST28) =>
        renderWithProvider(() => (
            <Content
                selectedSongIds={ids}
                potMetric={potMetric}
                countryFilter={countries}
                storeFilter={stores}
                dateFilter={datePeriod}
                songs={[]}
            />
        ));

    describe('is loaded', () => {
        test('renders subscription charts', async () => {
            const ids = [ISRC1, ISRC2];
            const container = await renderMocked(ids);

            const charts = await waitForElement(() =>
                container.getAllByTestId(CHART_TEST_ID));

            charts.forEach(chart =>
                expect(chart).toBeVisible());
        });

        test('shows sources', async () => {
            const ids = [ISRC1, ISRC2];
            const container = await renderMocked(ids);

            const sourcePopoverTrigger = container.getByText(DATASOURCES_TERM_TRIGGER);
            expect(sourcePopoverTrigger).toBeVisible();
        });
    });
});