import React from 'react';
import { render, screen } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import {
    LoadingIndicator,
    LoadingIndicatorProps,
    CLASS_NAME,
    CLASS_NAME_DOT,
    CLASS_NAME_FULLSCREEN,
    CLASS_NAME_OUTER,
    CLASS_NAME_SMALL,
} from '../loadingIndicator';

describe('<LoadingIndicator>', () => {
    const renderComponent = (props: LoadingIndicatorProps = {}) => {
        const { container } = render(<LoadingIndicator {...props} />);

        const component = container.querySelector(`.${CLASS_NAME}`);
        const outerElement = component?.querySelector(`.${CLASS_NAME_OUTER}`);
        return { component, outerElement };
    };

    testComponent(LoadingIndicator);

    test('applies style', () => {
        render(<LoadingIndicator style={{ marginTop: 10 }} />);
        expect(screen.getByTestId(CLASS_NAME)).toHaveStyle({ marginTop: '10px' });
    });

    test('has default styling', () => {
        const { component } = renderComponent({});

        expect(component).toBeInTheDocument();
        expect(component).not.toHaveClass(CLASS_NAME_SMALL);
        expect(component).not.toHaveClass(CLASS_NAME_FULLSCREEN);
    });

    test('has five dots', () => {
        const { component } = renderComponent({});
        expect(component?.querySelectorAll(`.${CLASS_NAME_DOT}`)).toHaveLength(5);
    });

    test('renders default title', () => {
        renderComponent();
        expect(screen.getByText('loading_pleaseWait')).toBeVisible();
    });

    describe('with "small": true', () => {
        test('adds "small" classname', () => {
            const { component } = renderComponent({ small: true });

            expect(component).toHaveClass(CLASS_NAME_SMALL);
            expect(component).not.toHaveClass(CLASS_NAME_FULLSCREEN);
        });
    });

    describe('with "fullscreen": true', () => {
        test('adds "fullscreen" classname', () => {
            const { component } = renderComponent({ fullscreen: true });

            expect(component).toHaveClass(CLASS_NAME_FULLSCREEN);
            expect(component).not.toHaveClass(CLASS_NAME_SMALL);
        });
    });

    test('renders custom title', () => {
        const title = 'TEST';
        renderComponent({ title });

        expect(screen.getByText(title)).toBeVisible();
    });
});