import React from 'react';
import * as apollo from '@apollo/client';
import { fireEvent, waitFor } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import BasicMetadata, { CLASSNAME } from '../basicMetadata';

describe('<BasicMetadata>', () => {
    const renderComponent = () => renderInAppContext(<BasicMetadata setSongCreated={jest.fn()} />);
    const createSong = jest.fn(() => Promise.resolve({}));

    beforeEach(() => {
        jest.spyOn(apollo, 'useMutation').mockReturnValue([
            createSong,
            {
                data: { isrc: '', recordingTitle: '' },
                loading: false,
                error: undefined
            } as apollo.MutationResult
        ]);
    });

    afterEach(() => {
        jest.clearAllMocks();
    });

    test('render BasicMetadata component', () => {
        const component = renderComponent();
        const basicMetadata = component.getByTestId(CLASSNAME);

        expect(basicMetadata).toBeVisible();
    });

    test('next button is disabled when required field empty', async () => {
        const isrc = 'ISRC A';
        const { container, getByText } = renderComponent();

        const isrcField = container.querySelectorAll('input[name="isrc"]').item(0);
        if (isrcField)
            fireEvent.change(isrcField, { target: { value: isrc } });

        const nextButton = container.getElementsByClassName(`${CLASSNAME}-next-button`).item(0);
        if (nextButton)
            fireEvent.submit(nextButton);

        const errorMessage = await waitFor(() => getByText('basicMetadata.newSongError'));

        expect(errorMessage).toBeVisible();
        expect(createSong).not.toHaveBeenCalled();
    });

    test('executes createNrSoundRecording after pressing next', async () => {
        const { container } = renderComponent();

        const songNameField = container.querySelectorAll('input[name="songName"]').item(0);
        if (songNameField)
            fireEvent.change(songNameField, { target: { value: 'SoundRecording1' } });

        const nextButton = container.getElementsByClassName(`${CLASSNAME}-next-button`).item(0);
        if (nextButton)
            fireEvent.submit(nextButton);

        await waitFor(() => expect(createSong).toHaveBeenCalledWith({
            variables: {
                isrc: '',
                originalLabel: '',
                recordingTitle: 'SoundRecording1'
            }
        }));
    });
});