import React, { FC } from 'react';
import { fireEvent, render, waitFor } from '@testing-library/react';
import {
    AudioInfringementModalProvider,
    useAudioInfringementModalContext,
} from '../audioInfringementModalProvider';

const TestComponent: FC = () => {
    const { state, dispatch } = useAudioInfringementModalContext();
    return (
        <p>
            Current state is:
            <span data-testid="testComponentState">
                {state.data?.trackMetadata.trackName || 'NONE'}
            </span>
            <button
                data-testid="testComponentStateButton"
                onClick={() =>
                    dispatch({
                        data: {
                            potentialAudioInfringementMatches: [],
                            crossAccountOSRConflictMatches: [],
                            trackMetadata: {
                                trackName: 'test',
                                artists: ['test'],
                                label: 'test',
                                imprint: 'test',
                            },
                        },
                    })
                }
                type="button"
            >
                Click Me
            </button>
        </p>
    );
};

describe('<AudioInfringementModalProvider/>', () => {
    test('handles context updates', async () => {
        const { getByTestId } = render(
            <AudioInfringementModalProvider>
                <TestComponent />
            </AudioInfringementModalProvider>
        );
        const renderedSpan = getByTestId('testComponentState');
        const renderedButton = getByTestId('testComponentStateButton');

        expect(renderedSpan.textContent).toBe('NONE');

        fireEvent.click(renderedButton);

        await waitFor(() => {
            expect(renderedSpan.textContent).toBe('test');
        });
    });
});