import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { render } from '@testing-library/react';
import { formatPercentage } from 'src/utils/formatNumber';
import { TopCountry } from 'src/selectors';
import { EMPTY_MESSAGE } from 'src/components/topPlaylists/topPlaylist/contentPanel/ContentPanel';
import TopCountriesTable, { Props, TEST_ID } from '../TopCountriesTable';

describe('<TopPlaylist>', () => {
    const country: TopCountry = {
        code: 'US',
        name: 'United States of America',
        alpha3: 'USA',
        position: 1,
        value: 4321,
        highlight: false
    };
    const defaultProps: Props = {
        isrc: '12345',
        name: 'Test name',
        countries: [country],
        totalStreams: 15000,
        index: 0,
        songCount: 2
    };

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

    test('renders TopCountriesTable', () => {
        const component = renderMocked();
        const { container } = component;
        const countriesTableComponent = component.getByTestId(TEST_ID);
        const titleComponent = component.getByText('Test name');
        const items = container.getElementsByClassName('TopCountryItem');
        const header = container.getElementsByClassName(`${TEST_ID}-header`);
        const content = container.getElementsByClassName(`${TEST_ID}-content`);

        expect(countriesTableComponent).toBeVisible();
        expect(countriesTableComponent).toContainElement(titleComponent);
        expect(header.length).toBe(1);
        expect(content.length).toBe(1);
        expect(items.length).toBe(1);
    });

    test('renders empty TopCountriesTable', () => {
        const component = renderMocked({ countries: [], totalStreams: 0 });
        const emptyPanel = component.getByText(EMPTY_MESSAGE);

        expect(emptyPanel).toBeVisible();
    });

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

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