import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { range } from 'lodash';
import { render } from '@testing-library/react';
import { formatNumber } from 'src/utils/formatNumber';
import { EMPTY_CHAR } from 'src/components/metric';
import MetricsTable, { Props } from '../MetricsTable';

describe('<MetricsTable>', () => {
    const defaultProps: Props = {
        loading: false,
        values: [],
        count: 0,
        potMetric: 'streams'
    };

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

    describe('when loading', () => {
        test('shows loading indicators and color markers', () => {
            const count = 2;
            const { container } = renderMocked({ loading: true, count });

            const loaderItems = container.getElementsByClassName('LoaderWrapper-item');
            expect(loaderItems).toHaveLength(count * 5);

            const dot1 = container.getElementsByClassName('bg-dataviz-0').item(0);
            const dot2 = container.getElementsByClassName('bg-dataviz-1').item(0);

            expect(dot1).toBeVisible();
            expect(dot2).toBeVisible();
        });
    });

    describe('when not loading', () => {
        test('does not show loading indicators', () => {
            const container = renderMocked({ loading: false });
            const loaderItems = container.baseElement.getElementsByClassName('LoaderWrapper-item');
            expect(loaderItems).toHaveLength(0);
        });

        test('shows metric values', () => {
            const values = [
                { name: 'track1', streams: 1, skipRate: null, saves: null, downloads: null },
                { name: 'track2', streams: 1000, skipRate: 0.2, saves: 300, downloads: 100 }
            ];
            const count = values.length + 1;
            const container = renderMocked({ values, count });

            range(count).forEach(i => {
                const text = values[i]
                    ? formatNumber(values[i].streams)
                    : EMPTY_CHAR;

                container.getAllByText(text).forEach(elem => {
                    expect(elem).toBeVisible();
                });
            });
        });

        test('shows color markers', () => {
            const values = [
                { name: 'track1', streams: 1, skipRate: null, saves: null, downloads: null },
                { name: 'track2', streams: 1000, skipRate: 0.2, saves: 300, downloads: 100 }
            ];
            const count = values.length + 1;
            const { container } = renderMocked({ values, count });

            const dot1 = container.getElementsByClassName('bg-dataviz-1').item(0);
            const dot2 = container.getElementsByClassName('bg-dataviz-2').item(0);

            expect(dot1).toBeVisible();
            expect(dot2).toBeVisible();
        });

        test('shows highlight for active metric', () => {
            const values = [
                { name: 'track1', streams: 1, skipRate: null, saves: null, downloads: null },
                { name: 'track2', streams: 1000, skipRate: 0.2, saves: 300, downloads: 100 }
            ];
            const count = values.length + 1;
            const { container } = renderMocked({ values, count, potMetric: 'saves' });

            const highlightedHeader = container.getElementsByClassName('MetricsTable-selected').item(0);

            expect(highlightedHeader && highlightedHeader.textContent).toBe('comparison.savesToCollection');
        });
    });
});