import React from 'react';
import { fireEvent } from '@testing-library/react';
import { Segment } from '@theorchard/suite-frontend';
import { renderInAppContext } from '@theorchard/suite-testing';
import { getMergedProduct } from 'lib/mockProductData';
import ProductTrackAudioContainer, {
    Props,
} from '../productTrackAudioContainer';

jest.mock('../productTrackAudioPlayer', () => ({
    ProductTrackAudioPlayer: () => <div data-testid="audio-player" />,
}));

describe('<ProductTrackAudioContainer />', () => {
    const setStateMock = jest.fn<void, [unknown]>();
    const useStateMock: jest.SpyInstance = jest.spyOn(React, 'useState');

    const defaultProduct = getMergedProduct({
        productId: 33,
        productName: 'ABC',
        releaseCorrection: null,
        label: {
            id: {
                vendorId: 123,
                subaccountId: 333,
            },
            name: 'Some label',
            contentReviewNote: null,
            vendor: {
                contentReviewNote: null,
                name: 'Some name',
                serviceTier: null,
            },
        },
    });

    const baseProps: Props = {
        tuid: '123456',
        currentTrackId: '',
        product: defaultProduct,
        trackNumber: 1,
        audioStatus: 0,
        onChangeCurrentTrack: jest.fn(),
        onChangeAudioStatus: jest.fn(),
    };

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

    beforeEach(() => {
        useStateMock.mockImplementation((init: unknown) => [
            init,
            setStateMock,
        ]);
    });
    afterEach(() => jest.resetAllMocks());

    test('renders track audio container', () => {
        const { container } = renderComponent();
        expect(
            container.querySelector('.product-track-audio-container')
        ).toBeVisible();
        expect(container.querySelector('.track-audio-button')).toBeVisible();
        expect(container.querySelector('.PlayGlyphIcon')).toBeVisible();
        expect(
            container.querySelector('.PauseGlyphIcon')
        ).not.toBeInTheDocument();
    });

    test('pause button', () => {
        const { container } = renderComponent({
            currentTrackId: '123456',
            audioStatus: 2,
        });

        expect(container.querySelector(`.PauseGlyphIcon`)).toBeVisible();
        expect(
            container.querySelector(`.PlayGlyphIcon`)
        ).not.toBeInTheDocument();

        const pauseButton = container.querySelector(`.track-audio-button`);
        expect(pauseButton).toBeTruthy();
        if (pauseButton) {
            fireEvent.click(pauseButton);
        }
        expect(baseProps.onChangeAudioStatus).toHaveBeenCalledWith(-1);
    });

    test('play button', () => {
        const { container } = renderComponent({
            currentTrackId: '111111',
        });

        expect(container.querySelector(`.PlayGlyphIcon`)).toBeVisible();
        expect(
            container.querySelector(`.PauseGlyphIcon`)
        ).not.toBeInTheDocument();

        const playButton = container.querySelector(`.track-audio-button`);
        expect(playButton).toBeTruthy();
        if (playButton) {
            fireEvent.click(playButton);
        }
        expect(setStateMock).toHaveBeenCalledWith(true);
        expect(baseProps.onChangeCurrentTrack).toHaveBeenCalledWith(
            '123456',
            1
        );
        expect(baseProps.onChangeAudioStatus).toHaveBeenCalledWith(2);
    });

    test('tracks playback event', () => {
        const segmentTrack = jest.spyOn(Segment, 'trackEvent');

        const { container } = renderComponent();
        const audioButton = container.querySelector('.track-audio-button');
        expect(audioButton).toBeTruthy();
        const timestamp = Date.now();

        jest.useFakeTimers().setSystemTime(timestamp);
        if (audioButton) {
            fireEvent.click(audioButton);
        }
        const eventLabel = 'Play Audio';
        const eventProps = {
            category: 'Content Review Digital Audio',
            value: timestamp,
            label: eventLabel,
            accountId: 123,
            subaccountId: 333,
            productId: 33,
        };
        expect(segmentTrack).toHaveBeenCalledWith(
            'Click',
            eventProps,
            eventLabel
        );
    });
});