import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { render, RenderResult, fireEvent } from '@testing-library/react';
import { formatMessage } from '@orchard/frontend-localization';
import { formatNumber } from 'src/utils/formatNumber';
import StreamsBySubscriptionChart, { Props } from '../Chart';

describe('<StreamsBySubscriptionChart>', () => {
    const defaultProps: Props = {
        data: [],
        index: 0
    };

    const series1 = [
        { label: 'streamsBySubscription.subscription', value: 150000 },
        { label: 'streamsBySubscription.adSupported', value: 30000 },
        { label: 'streamsBySubscription.midTier', value: 10000 }
    ];
    const series2 = [
        { label: 'streamsBySubscription.subscription', value: 150000 },
        { label: 'streamsBySubscription.adSupported', value: 300 },
        { label: 'streamsBySubscription.midTier', value: null },
    ];

    const renderMocked = (props: Partial<Props> = {}, container?: RenderResult) => {
        if (container) {
            container.rerender(<StreamsBySubscriptionChart {...{ ...defaultProps, ...props }} />);
            return container;
        }
        return render(<StreamsBySubscriptionChart {...{ ...defaultProps, ...props }} />);
    };

    test('renders pie chart', () => {
        const { container } = renderMocked({ data: series1 });

        series1.forEach((_, index) => {
            const piePart = container.getElementsByClassName(`highcharts-color-${index}`).item(0);
            expect(piePart).toBeVisible();
        });
    });

    test('renders pie slice for subscription', () => {
        const component = renderMocked({ data: series2 });
        const { container } = component;
        const sliceSubscription = container.querySelector('path.bg-dataviz-0-0');
        if (sliceSubscription) fireEvent.mouseOver(sliceSubscription);

        const tooltip = component.getByText('99.80%');
        expect(tooltip).toBeVisible();
    });

    test('renders pie slice for adSupported', () => {
        const component = renderMocked({ data: series2 });
        const { container } = component;
        const sliceAdSupported = container.querySelector('path.bg-dataviz-0-1');
        if (sliceAdSupported) fireEvent.mouseOver(sliceAdSupported);

        const tooltip = component.getByText('0.20%');
        expect(tooltip).toBeVisible();
    });

    test('does not render pie slice if value is null', () => {
        const { container } = renderMocked({ data: series2 });
        const sliceMidTier = container.querySelector('path.bg-dataviz-0-2');

        expect(sliceMidTier).toBeNull();
    });

    test('renders table', () => {
        const container = renderMocked({ data: series1 });

        series1.forEach(({ label, value }) => {
            const tableCell = container.getByText(formatMessage(label));
            expect(tableCell).toBeVisible();

            expect(tableCell.nextSibling && tableCell.nextSibling.textContent).toEqual(formatNumber(value));
        });
    });

    test('renders pie-parts and legends with "dataviz-x-x" colors', () => {
        const index = 2;
        const { container } = renderMocked({ data: series1, index });

        series1.forEach((_, subIndex) => {
            const elements = container.getElementsByClassName(`bg-dataviz-${index}-${subIndex}`);
            expect(elements.length).toBe(2);
        });
    });
});