import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { render } from '@testing-library/react';
import { STORE_SPOTIFY } from 'src/constants/stores';
import { formatPercentage } from 'src/utils/formatNumber';
import { PlaylistData } from 'src/selectors';
import TopPlaylist, { Props, TEST_ID } from '../TopPlaylist';
import { TEST_ID as CONTENT_PANEL_TEST_ID } from '../contentPanel/ContentPanel';

describe('<TopPlaylist>', () => {
    const emptyContentClassName = `${CONTENT_PANEL_TEST_ID}-empty`;
    const playlist: PlaylistData = {
        playlistName: 'Indie Gaming',
        playlistImage: 'https://dhfsk7jl2g0km.cloudfront.net/playlist-37i9dQZF1DX4geSlFB9288.jpeg',
        streams: 1234,
        storeId: STORE_SPOTIFY,
        playlistUrl: 'spotify-personalized-playlist:dailyMix',
    };
    const defaultProps: Props = {
        index: 0,
        isrc: '12345',
        name: 'Test name',
        playlists: [playlist],
        totalStreams: 15000,
        totalPlaylistStreams: 10000,
        playlistsCount: 1,
    };

    const renderMocked = (props?: Partial<Props>) =>
        render(<TopPlaylist {...{ ...defaultProps, ...props }} />);

    test('renders TopPlaylist', () => {
        const component = renderMocked();
        const { container } = component;
        const playlistComponent = component.getByTestId(TEST_ID);
        const titleComponent = component.getByText('Test name');
        const items = container.getElementsByClassName('TopPlaylistItem');
        const header = container.getElementsByClassName(`${TEST_ID}-header`);
        const content = container.getElementsByClassName(`${TEST_ID}-content`);
        const emptyContent = container.getElementsByClassName(emptyContentClassName);

        expect(playlistComponent).toBeVisible();
        expect(playlistComponent).toContainElement(titleComponent);
        expect(header.length).toBe(1);
        expect(content.length).toBe(1);
        expect(items.length).toBe(1);
        expect(emptyContent.length).toBe(0);
    });

    test('renders empty TopPlaylist component if isLoading is over and no data', () => {
        const { container } = renderMocked({ isLoading: false, playlists: [] });
        const emptyContent = container.getElementsByClassName(emptyContentClassName)[0];

        expect(emptyContent).toBeVisible();
    });

    test('renders TopPlaylist with correct percentage', () => {
        const component = renderMocked();
        const formattedPercentage = formatPercentage((playlist.streams || 0) / defaultProps.totalStreams);
        const percentage = component.getByText(formattedPercentage);

        expect(percentage).toBeVisible();
    });
});