import React from 'react';
import { fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { getMockValidation } from 'lib/test/mocks/validations';
import * as CurrentValidationProvider from '../../currentValidationProvider/currentValidationProvider';
import TrackFieldValidation, { Props } from '../trackFieldValidation';

describe('<TrackFieldValidation>', () => {
    const renderComponent = (props: Props) => {
        return renderInAppContext(<TrackFieldValidation {...props} />);
    };

    test('renders empty char', () => {
        const { getByText } = renderComponent({ tuid: 1, validations: [] });
        expect(getByText('-')).toBeVisible();
    });

    test('renders error notice', () => {
        const { getByText, getByTestId } = renderComponent({
            tuid: 1,
            validations: [
                getMockValidation({ severity: 'warn', targetId: 1 }),
                getMockValidation({ severity: 'error', targetId: 1 }),
            ],
        });
        expect(getByText('2')).toBeVisible();
        const glyph = getByTestId('WarningGlyphIcon');
        expect(glyph).toHaveClass('error');
    });

    test('renders warning notice', () => {
        const { getByText, getByTestId } = renderComponent({
            validations: [
                getMockValidation({ severity: 'warn', targetId: 1 }),
                getMockValidation({ severity: 'warn', targetId: 1 }),
                getMockValidation({ severity: 'warn', targetId: 1 }),
            ],
            tuid: 1,
        });
        expect(getByText('3')).toBeVisible();
        const glyph = getByTestId('WarningGlyphIcon');
        expect(glyph).toHaveClass('warning');
    });

    test('renders Pill component', () => {
        const { getByText, getByTestId } = renderComponent({
            validations: [getMockValidation({ severity: 'warn', targetId: 1 })],
            tuid: 1,
        });
        expect(getByTestId('track-1-pill')).toBeVisible();
        expect(getByText('1')).toBeVisible();
    });

    test('uses track as default idPrefix for pill and wrapper testIds', () => {
        const { getByTestId } = renderComponent({
            validations: [getMockValidation({ severity: 'warn', targetId: 1 })],
            tuid: 1,
        });
        expect(getByTestId('track-1-pill')).toBeInTheDocument();
        expect(getByTestId('track-1-pill-wrapper')).toBeInTheDocument();
    });

    test('uses custom idPrefix for pill and wrapper testIds, does not render default track-prefixed ids', () => {
        const { getByTestId, queryByTestId } = renderComponent({
            validations: [getMockValidation({ severity: 'warn', targetId: 1 })],
            tuid: 1,
            idPrefix: 'contributor',
        });
        expect(getByTestId('contributor-1-pill')).toBeInTheDocument();
        expect(getByTestId('contributor-1-pill-wrapper')).toBeInTheDocument();
        expect(queryByTestId('track-1-pill')).not.toBeInTheDocument();
    });

    test.skip('set track as currentValidation when clicking "Notice" pill', () => {
        const mockDispatch = jest.fn();
        const trackUID = 123;

        jest.spyOn(
            CurrentValidationProvider,
            'useCurrentValidationContext'
        ).mockReturnValue({
            state: { currentValidation: '' },
            dispatch: mockDispatch,
        });

        const { getByTestId } = renderComponent({
            validations: [
                getMockValidation({ severity: 'warn', targetId: trackUID }),
            ],
            tuid: trackUID,
        });
        const wrapper = getByTestId(`track-${trackUID}-pill-wrapper`);

        fireEvent.click(wrapper);

        expect(mockDispatch).toHaveBeenCalledWith({
            currentValidation: `track-${trackUID}`,
            triggerScroll: true,
            showPopover: false,
        });
    });
});