import React from 'react';
import { render } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { Alert } from '../alert';
import { AlertContainer, AlertContainerProps } from '../alertContainer';

describe('<AlertContainer>', () => {
    const header = 'header text here';
    const defaultProps: AlertContainerProps = { header };

    testComponent(AlertContainer, defaultProps);

    test('renders header', () => {
        const wrapper = render(<AlertContainer {...defaultProps} />);
        expect(wrapper.getByText(defaultProps.header)).toBeVisible();
    });

    test('renders body', () => {
        const bodyText = 'some body text';
        const wrapper = render(
            <AlertContainer {...defaultProps}>
                <div>{bodyText}</div>
            </AlertContainer>
        );
        const body = wrapper.getByText(bodyText);
        expect(body).toBeVisible();
        expect(body.parentElement).toHaveAttribute('aria-hidden', 'false');
    });

    test('defaultClosed hides body initially', () => {
        const bodyText = 'some body text';
        const wrapper = render(
            <AlertContainer {...defaultProps} defaultClosed>
                <div>{bodyText}</div>
            </AlertContainer>
        );
        const body = wrapper.getByText(bodyText);
        expect(body.parentElement).toHaveAttribute('aria-hidden', 'true');
    });

    describe('companion HelpTooltip component', () => {
        test('render if getting helpTooltipProps', () => {
            const helpTooltipProps = {
                id: 'AlertContainerHello',
                message: 'Im a helpful tooltip',
            };

            const wrapper = render(
                <AlertContainer {...defaultProps} helpTooltipProps={helpTooltipProps}>
                    <div />
                </AlertContainer>
            );

            expect(wrapper.getByTestId('HelpTooltip')).toBeInTheDocument();
        });

        test('does not render if not passed helpTooltipProps', () => {
            const wrapper = render(
                <AlertContainer {...defaultProps}>
                    <Alert text="Lorem ipsum" variant="information" />
                </AlertContainer>
            );

            expect(wrapper.queryByTestId('HelpTooltip')).toBeFalsy();
        });
    });

    describe('inner Alert component(s)', () => {
        test('one Alert fits all width', () => {
            const wrapper = render(
                <AlertContainer {...defaultProps}>
                    <Alert text="Lorem ipsum" variant="information" />
                </AlertContainer>
            );

            const alertWrapper = wrapper.getByTestId('alertWrapper');
            expect(alertWrapper).not.toHaveClass('isWrapping');
        });

        test('more than 4 Alert use custom grid layout', () => {
            const wrapper = render(
                <AlertContainer {...defaultProps}>
                    <Alert text="Lorem ipsum 0" variant="information" />
                    <Alert text="Lorem ipsum 1" variant="information" />
                    <Alert text="Lorem ipsum 2" variant="information" />
                    <Alert text="Lorem ipsum 3" variant="information" />
                    <Alert text="Lorem ipsum 4" variant="information" />
                </AlertContainer>
            );

            const alertWrapper = wrapper.getByTestId('alertWrapper');
            expect(alertWrapper).toHaveClass('isWrapping');
        });
    });
});