import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { getMergedProduct, getProductMetadata } from 'lib/mockProductData';
import * as trackAudioQuery from 'src/data/queries/trackAudio/trackAudio';
import ProductTracksAudioPlayer, {
    CLASS_NAME,
    Props,
} from '../productTracksAudioPlayer';

describe('<ProductTracksAudioPlayer />', () => {
    const baseProps: Props = {
        product: getProductMetadata(),
        mergedProduct: getMergedProduct(),
        track: getMergedProduct().getTrackList()[0],
        onChangeAudioStatus: jest.fn(),
        onChangeCurrentTrack: jest.fn(),
        audioStatus: 0,
    };

    const renderComponent = (partialProps?: Partial<Props>) => {
        return renderInAppContext(
            <ProductTracksAudioPlayer {...baseProps} {...partialProps} />
        );
    };

    beforeEach(() => {
        // Makes sure console doesn't get polluted with error messages
        jest.spyOn(
            window.HTMLMediaElement.prototype,
            'play'
        ).mockImplementation(async () => await Promise.resolve());
        jest.spyOn(HTMLAudioElement.prototype, 'pause').mockImplementation(
            // eslint-disable-next-line @typescript-eslint/no-empty-function
            () => {}
        );
    });

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

    test('renders with no errors', () => {
        const { getByTestId } = renderComponent();

        const element = getByTestId(CLASS_NAME);
        expect(element).toBeInTheDocument();
    });

    test('renders primary audio player only', () => {
        const { getByTestId, queryByTestId } = renderComponent();
        const primarySection = getByTestId(`AudioPlayerSection-primary`);
        expect(primarySection).toBeInTheDocument();
        const secondarySection = queryByTestId(`AudioPlayerSection-secondary`);
        expect(secondarySection).not.toBeInTheDocument();
    });

    test('renders both primary and secondary audio player', () => {
        const props = {
            product: getProductMetadata({
                releaseCorrection: {
                    items: [
                        {
                            keyId: 123456,
                            keyValue: 'tomsmusic.wav',
                            tableName: 'track',
                            fieldName: 'track',
                            __typename: 'ReleaseCorrectionDetail',
                        },
                    ],
                },
            }),
            mergedProduct: getMergedProduct(),
        };
        const { getByTestId } = renderComponent(props);
        const primarySection = getByTestId(`AudioPlayerSection-primary`);
        expect(primarySection).toBeInTheDocument();
        const secondarySection = getByTestId(`AudioPlayerSection-secondary`);
        expect(secondarySection).toBeInTheDocument();
    });

    test('does render secondary section when track is not revised', () => {
        renderComponent();

        const useTrackAudioQuerySpy = jest.spyOn(
            trackAudioQuery,
            'useTrackAudioQuery'
        );

        expect(useTrackAudioQuerySpy).not.toHaveBeenCalled();
    });
});