import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { Pill, PillProps } from '../pill';

describe('<Pill>', () => {
    const defaultProps: PillProps = {
        text: 'TheText OfThePill',
        popoverOptions: {
            id: 'PillDemo',
            content: <span>This is the PopoverContent</span>,
        },
    };

    const renderComponent = (props: Partial<PillProps> = {}) =>
        render(<Pill {...({ ...defaultProps, ...props } as PillProps)} />);

    testComponent(Pill);

    test('renders just the pill text', () => {
        const { getByText, getByTestId } = renderComponent();

        const sbSections = document.querySelectorAll('.SuiteBadge-section');
        expect(sbSections).toHaveLength(1);

        expect(getByTestId('Pill')).toHaveClass('active');
        expect(getByText('TheText OfThePill')).toBeInTheDocument();
    });

    test('renders just the label text', () => {
        const { getByText } = renderComponent({
            label: 'Ima Label',
            text: undefined,
        });

        const sbSections = document.querySelectorAll('.SuiteBadge-section');
        expect(sbSections).toHaveLength(1);

        expect(getByText('Ima Label')).toBeInTheDocument();
    });

    test('renders the children along with the text', () => {
        const { getByTestId } = renderComponent({
            children: <div>HiAmAChild</div>,
        });

        const child = getByTestId('SuiteBadgeChildren');
        const text = getByTestId('SuiteBadgeText');

        expect(child).toHaveTextContent('HiAmAChild');
        expect(text).toHaveTextContent('TheText OfThePill');
    });

    test('renders just the user icon', () => {
        const { getByTestId } = renderComponent({
            iconCategory: 'glyph',
            iconName: 'user',
            text: undefined,
        });

        const secWrappers = document.querySelectorAll('.SuiteBadge-section');
        expect(secWrappers).toHaveLength(1);

        const icon = getByTestId('SuiteBadgeIcon');
        expect(icon).toBeInTheDocument();
        expect(icon.querySelector('.UserGlyphIcon')).toBeInTheDocument();
    });

    test('renders a dot icon, the text and a warning indicator', () => {
        const { getByTestId } = renderComponent({
            iconCategory: 'glyph',
            iconName: 'dot',
            indicator: 'warning',
        });

        const secWrappers = document.querySelectorAll('.SuiteBadge-section');
        expect(secWrappers).toHaveLength(3);

        const icon = getByTestId('SuiteBadgeIcon');
        expect(icon).toBeInTheDocument();
        expect(icon.querySelector('.DotGlyphIcon')).toBeInTheDocument();

        const text = getByTestId('SuiteBadgeText');
        expect(text).toHaveTextContent('TheText OfThePill');

        const indicator = getByTestId('WarningGlyphIcon');
        expect(indicator).toHaveClass('warning');
    });

    test('renders a check indicator with the text', () => {
        const { getByTestId } = renderComponent({
            text: 'Im aSuccess',
            indicator: 'success',
        });

        const secWrappers = document.querySelectorAll('.SuiteBadge-section');
        expect(secWrappers).toHaveLength(2);

        const text = getByTestId('SuiteBadgeText');
        expect(text).toHaveTextContent('Im aSuccess');

        const indicator = getByTestId('CheckGlyphIcon');
        expect(indicator).toHaveClass('success');
    });

    test('shows a Popover when its clicked', async () => {
        const { findByText } = renderComponent();

        const popoverContent = document.querySelector('.pillPopoverContent');
        expect(popoverContent).not.toBeInTheDocument();

        const pill = document.querySelector('#PillDemo');
        fireEvent.click(pill!);

        expect(await findByText('This is the PopoverContent')).toBeInTheDocument();
    });

    test('does not show the Popover when its hover', () => {
        const { queryByText } = renderComponent();

        const popoverContent = document.querySelector('.pillPopoverContent');
        expect(popoverContent).not.toBeInTheDocument();

        const pill = document.querySelector('#PillDemo');
        fireEvent.mouseOver(pill!);

        expect(popoverContent).not.toBeInTheDocument();
        expect(queryByText('This is the PopoverContent')).toBeNull();
    });

    test('does not show the Popover when disabled', async () => {
        const { queryByText } = renderComponent({ disabled: true });

        const popoverContent = document.querySelector('.pillPopoverContent');
        expect(popoverContent).not.toBeInTheDocument();

        const pill = document.querySelector('#PillDemo');
        fireEvent.click(pill!);

        expect(queryByText('This is the PopoverContent')).toBeNull();
    });

    test.each([['success'], ['warning'], ['error'], ['revision'], ['crystal']])(
        'renders with variant %s and its indicator',
        (variant) => {
            const { getByTestId } = renderComponent({ variant: variant as PillProps['variant'] });

            const pill = getByTestId('Pill');
            expect(pill).toHaveClass(`variant-${variant}`);
        }
    );
});