import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import {
    getMergedProduct,
    getMockProductTrack,
    getProductMetadata,
} from 'lib/mockProductData';
import { Product } from 'src/data/queries/product/types';
import ProductTracks, { CLASS_NAME, Props } from '../productTracks';

describe('<ProductTracks>', () => {
    beforeEach(() => {
        const mockIntersectionObserver = jest.fn();
        mockIntersectionObserver.mockReturnValue({
            observe: () => null,
            unobserve: () => null,
            disconnect: () => null,
        });
        window.IntersectionObserver = mockIntersectionObserver;
    });

    const renderComponent = (partialProps: Partial<Product> = {}) => {
        const mockProduct = getProductMetadata();

        const mockMergedProduct = getMergedProduct({
            productId: 1,
            tracks: [
                getMockProductTrack(),
                getMockProductTrack({
                    isrc: 'abc',
                    tuid: '456789',
                    trackNumber: 2,
                }),
            ],
            ...partialProps,
        });
        const defaultProps: Props = {
            product: mockProduct,
            mergedProduct: mockMergedProduct,
            isMergedProductFullyLoaded: true,
        };
        const props: Props = { ...defaultProps };

        return renderInAppContext(<ProductTracks {...props} />);
    };

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

    describe('renders with no errors', () => {
        test('header and track rows', () => {
            const { getByTestId } = renderComponent();

            const wrapperEl = getByTestId(CLASS_NAME);
            expect(wrapperEl).toBeInTheDocument();

            const headerEl = wrapperEl.getElementsByClassName(
                'ProductModal-SectionTitle'
            )[0];
            const headText = $t('contentReview.productTracks.tracks');
            expect(headerEl).toHaveTextContent(headText);

            const gridTableHeader = wrapperEl.querySelector(
                '.GridTable-header-row'
            );
            expect(gridTableHeader).toBeInTheDocument();

            const rowsArr = wrapperEl.getElementsByClassName('GridTable-row');
            expect(rowsArr).toHaveLength(3);
        });

        test('displays ProductTracksAudioPlayer when enhancedTrackAudioPlayer is true', () => {
            const { getByTestId } = renderComponent();

            const wrapperEl = getByTestId(CLASS_NAME);
            expect(wrapperEl).toBeInTheDocument();

            const audioPlayerEl = wrapperEl.getElementsByClassName(
                'ProductTracksAudioPlayer'
            )[0];
            expect(audioPlayerEl).toBeInTheDocument();
        });
    });
});