import '@testing-library/jest-dom/extend-expect';
import React, { RefObject } from 'react';
import renderWithProvider from 'lib/testing/provider';
import { waitForElement } from '@testing-library/react';
import { mockQuery } from 'lib/testing/mocks';
import { createSoundRecordingMetadata } from 'lib/factories/soundRecording';
import { ComparisonFilter } from 'src/definitions';
import { getCountryName, getStoreName, getPeriodName } from 'src/selectors/filters';
import { FIRST28 } from 'src/constants/periods';
import ComparisonHeader from '../ComparisonHeader';

describe('<ComparisonHeader>', () => {
    const ISRC1 = 'ID1';
    const ISRC2 = 'ID2';

    const SONG1 = createSoundRecordingMetadata({ isrc: ISRC1, name: `SONG ${ISRC1}` });
    const SONG2 = createSoundRecordingMetadata({ isrc: ISRC2, name: `SONG ${ISRC2}` });

    const renderComponent = (filter: Partial<ComparisonFilter>) => {
        const target = {
            current: { getBoundingClientRect: () => ({ top: 0 }) }
        } as unknown as RefObject<HTMLElement>;

        return renderWithProvider(() => <ComparisonHeader target={target} />, {
            filter,
            mocks: [
                mockQuery('SoundRecordingMetadataQuery', {
                    variables: { isrc: ISRC1 },
                    result: SONG1
                }),
                mockQuery('SoundRecordingMetadataQuery', {
                    variables: { isrc: ISRC2 },
                    result: SONG2
                })
            ]
        });
    };

    test('renders selected songs', async () => {
        const selectedSongIds = [ISRC1, ISRC2];
        const container = await renderComponent({
            selectedSongIds
        });

        const song1Element = await waitForElement(() =>
            container.getByText(`SONG ${ISRC1}`));
        const song2Element = await waitForElement(() =>
            container.getByText(`SONG ${ISRC2}`));

        expect(song1Element).toBeVisible();
        expect(song2Element).toBeVisible();
    });


    test('renders selected country filter', async () => {
        const countryCode = 'NO';
        const countryFilter = [countryCode];
        const container = await renderComponent({
            countryFilter
        });

        const element = await waitForElement(() =>
            container.getByText(getCountryName(countryCode)));

        expect(element).toBeVisible();
    });

    test('renders selected store filter', async () => {
        const storeId = 1;
        const storeFilter = [storeId];
        const container = await renderComponent({
            storeFilter
        });

        const element = await waitForElement(() =>
            container.getByText(getStoreName(storeId)));

        expect(element).toBeVisible();
    });

    test('renders selected date filter', async () => {
        const dateFilter = FIRST28;
        const container = await renderComponent({
            dateFilter
        });

        const element = await waitForElement(() =>
            container.getByText(getPeriodName(dateFilter)));

        expect(element).toBeVisible();
    });
});