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

describe('<TrackMetadata>', () => {
    const renderComponent = () => renderInAppContext(
        <TrackMetadata setAddRightsInfo={jest.fn()} songId="12345" />
    );

    const updateSong = jest.fn(() => Promise.resolve({}));

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

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

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

        expect(trackMetadata).toBeVisible();
    });

    test('next button is disabled when duration field input incorrect', async () => {
        const { container } = renderComponent();

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

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

        await waitFor(() => expect(updateSong).not.toHaveBeenCalled());
    });

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

        const durationField = container.querySelectorAll('input[name="duration"]').item(0);
        if (durationField)
            fireEvent.change(durationField, { target: { value: '00:05:03' } });

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

        await waitFor(() => expect(updateSong).toHaveBeenCalledWith({
            variables: {
                id: '12345',
                duration: 'PT5M3S',
                versionTitle1: '',
                versionTitle2: '',
                versionTitle3: '',
                firstReleaseYear: NaN
            }
        }));
    });
});