import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { getMergedProduct } from 'lib/mockProductData';
import {
    mockedValidations,
    mockedBlocklistValidations,
    mockedPricingValidations,
    mockedPotentialAudioInfringementValidation,
    mockedCrossAccountOSRConflictValidation,
} from 'lib/test/mocks/validations';
import ProductValidationBlock, {
    CLASS_NAME,
    Props,
} from '../productValidationBlock';

describe('ProductValidationBlock', () => {
    const defaultProps: Props = {
        validations: mockedValidations,
        product: getMergedProduct(),
    };

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

    const renderComponent = (customProps?: Partial<Props>) => {
        return renderInAppContext(
            <ProductValidationBlock {...defaultProps} {...customProps} />
        );
    };

    test('renders a expanded section with alerts block with grouped alert items', () => {
        const { getByTestId } = renderComponent();
        const productValidationBlockEl = getByTestId(CLASS_NAME);

        expect(productValidationBlockEl).toBeInTheDocument();
        expect(getByTestId(`${CLASS_NAME}.noticeCount`)).toHaveTextContent(
            'Notices (4)'
        );
        expect(
            productValidationBlockEl.getElementsByClassName(
                'ProductValidationGroup'
            )
        ).toHaveLength(4);
    });

    test('renders a BlocklistValidationGroup component when its a BLOCKLIST group', () => {
        const { getByTestId } = renderComponent({
            validations: [...mockedValidations, ...mockedBlocklistValidations],
        });

        const blockListValidationGrp = getByTestId('BlocklistValidationGroup');
        expect(blockListValidationGrp).toBeInTheDocument();

        const parentEl = getByTestId(CLASS_NAME);
        const validationGroups = parentEl.getElementsByClassName(
            'ProductValidationGroup'
        );
        expect(validationGroups).toHaveLength(5);
    });

    test('renders a PricingValidationGroup component when its a PRICING group', () => {
        const { getByTestId } = renderComponent({
            validations: [...mockedValidations, ...mockedPricingValidations],
        });

        const pricingValidationGrp = getByTestId('PricingValidationGroup');
        expect(pricingValidationGrp).toBeInTheDocument();

        const parentEl = getByTestId(CLASS_NAME);
        const validationGroups = parentEl.getElementsByClassName(
            'ProductValidationGroup'
        );
        expect(validationGroups).toHaveLength(5);
    });

    test('renders a group for potential audio infringement when there is a notice for one', () => {
        const { getByTestId } = renderComponent({
            validations: [mockedPotentialAudioInfringementValidation],
        });

        expect(getByTestId(`${CLASS_NAME}.noticeCount`)).toHaveTextContent(
            'Notices (1)'
        );
        expect(getByTestId('validationGroupTitle')).toHaveTextContent(
            'Potential Audio Infringement'
        );
        expect(getByTestId('validationGroupCount')).toHaveTextContent('1');
    });

    test('renders only one group for potential audio infringement when there is a notice for one and a cross account osr conflict on same track', () => {
        const { getByTestId } = renderComponent({
            validations: [
                mockedPotentialAudioInfringementValidation,
                mockedCrossAccountOSRConflictValidation,
            ],
        });

        expect(getByTestId(`${CLASS_NAME}.noticeCount`)).toHaveTextContent(
            'Notices (1)'
        );
        expect(getByTestId('validationGroupTitle')).toHaveTextContent(
            'Potential Audio Infringement'
        );
        expect(getByTestId('validationGroupCount')).toHaveTextContent('1');
    });

    test('renders only one group for potential audio infringement when there is a notice for one and a cross account osr conflict on different tracks', () => {
        const { getByTestId } = renderComponent({
            validations: [
                {
                    ...mockedPotentialAudioInfringementValidation,
                    targetId: 35817954,
                },
                {
                    ...mockedCrossAccountOSRConflictValidation,
                    targetId: 35817955,
                },
            ],
        });

        expect(getByTestId(`${CLASS_NAME}.noticeCount`)).toHaveTextContent(
            'Notices (1)'
        );
        expect(getByTestId('validationGroupTitle')).toHaveTextContent(
            'Potential Audio Infringement'
        );
        expect(getByTestId('validationGroupCount')).toHaveTextContent('2');
    });

    test('renders a group for potential audio infringement when there is a cross account osr conflict notice', () => {
        const { getByTestId } = renderComponent({
            validations: [mockedCrossAccountOSRConflictValidation],
        });

        expect(getByTestId(`${CLASS_NAME}.noticeCount`)).toHaveTextContent(
            'Notices (1)'
        );
        expect(getByTestId('validationGroupTitle')).toHaveTextContent(
            'Potential Audio Infringement'
        );
        expect(getByTestId('validationGroupCount')).toHaveTextContent('1');
    });
});