import React from 'react';
import { waitFor, fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { useHistory } from 'react-router-dom';
import {
    ROUTE_TOOLS_CONTENT_MODERATION,
    ROUTE_TOOLS_PUB_SONG_CHANGES,
} from 'src/constants';
import ToolsCard, { CLASSNAME } from '../toolsCard';

jest.mock('react-router-dom', () => ({
    ...jest.requireActual('react-router-dom'),
    useHistory: jest.fn(),
}));

describe('<ToolsCard>', () => {
    const mockPush = jest.fn();

    const renderComponent = (title: string, subtitle: string) =>
        renderInAppContext(
            <div className={CLASSNAME}>
                <ToolsCard title={title} subtitle={subtitle} />
            </div>
        );

    beforeEach(() => {
        (useHistory as jest.Mock).mockReturnValue({ push: mockPush });
    });

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

    describe('renders its elements', () => {
        test('renders the card title', async () => {
            const { container } = renderComponent(
                'Artist Name Change',
                'subheader'
            );
            const elem = container
                .getElementsByClassName('ToolsCard-header')
                .item(0);
            if (!elem) throw new Error('Element not found');
            await waitFor(() => expect(elem).toBeVisible());
        });

        test('renders the card subtitle', async () => {
            const { container } = renderComponent(
                'Artist Name Change',
                'subheader'
            );
            const elem = container
                .getElementsByClassName('ToolsCard-body')
                .item(0);
            if (!elem) throw new Error('Element not found');
            await waitFor(() => expect(elem).toBeVisible());
        });

        test('opens artist name update sidecar when card is clicked', async () => {
            const { getByTestId, getByText } = renderComponent(
                'Artist Name Change',
                'subheader'
            );
            fireEvent.click(getByText('Artist Name Change'));
            const approvalSidecar = getByTestId('Modal');
            expect(approvalSidecar).toBeInTheDocument();
        });
    });

    describe('navigation', () => {
        test('navigates to pub composition changes page when clicked', () => {
            const { getByText } = renderComponent(
                'Composition Changes',
                'subtitle'
            );
            fireEvent.click(getByText('Composition Changes'));
            expect(mockPush).toHaveBeenCalledWith(ROUTE_TOOLS_PUB_SONG_CHANGES);
        });

        test('navigates to content moderation page when clicked', () => {
            const { getByText } = renderComponent(
                'Content Moderation',
                'subtitle'
            );
            fireEvent.click(getByText('Content Moderation'));
            expect(mockPush).toHaveBeenCalledWith(
                ROUTE_TOOLS_CONTENT_MODERATION
            );
        });
    });
});