import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { range } from 'lodash-es';
import { Props, PillCloud } from '../pillCloud';

describe('<PillCloud>', () => {
    const pillsProps = range(1, 8).map((index) => ({
        popoverOptions: {
            id: `PopoverId_${index}`,
            content: (
                <div className="paddedContainerVariant">
                    <span>{`PillPopoverText_${index}`}</span>
                </div>
            ),
        },
        text: `PillText_${index}`,
    }));

    const defaultProps: Props = {
        pillsProps,
        maxVisibleCount: 5, // default, but for reader clarity
    };

    const renderComponent = (props?: Partial<Props>) =>
        render(<PillCloud {...defaultProps} {...props} />);

    testComponent(PillCloud);

    test('applies style', () => {
        const { getByTestId } = renderComponent({ style: { marginTop: 10 } });
        expect(getByTestId('PillCloud')).toHaveStyle({ marginTop: '10px' });
    });

    test('renders without default props', () => {
        const { container, getByTestId } = renderComponent();

        expect(getByTestId('PillCloud')).toBeInTheDocument();
        expect(container.querySelectorAll('.PillCloud-pill')).toHaveLength(5);
    });

    test('expands the pill cloud', () => {
        const { container, getByTestId } = renderComponent();

        expect(container.querySelectorAll('.PillCloud-pill')).toHaveLength(5);

        const expander = getByTestId('HiddenCount-button');
        fireEvent.click(expander);

        expect(container.querySelectorAll('.PillCloud-pill')).toHaveLength(7);
    });

    test('does not render the expander button if there are less than maxVisible', () => {
        const { queryByTestId } = renderComponent({ maxVisibleCount: 10 });

        expect(queryByTestId('HiddenCount-button')).not.toBeInTheDocument();
    });

    test('does not expand the pill cloud if disableExpand is set', () => {
        const { container, getByTestId } = renderComponent({ disableExpand: true });

        expect(container.querySelectorAll('.PillCloud-pill')).toHaveLength(5);

        const expander = getByTestId('HiddenCount-button');
        fireEvent.click(expander);

        expect(container.querySelectorAll('.PillCloud-pill')).toHaveLength(5);
    });
});