import React from 'react';
import { render, screen } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { Status, StatusProps } from '../status';

describe('<Status>', () => {
    const defaultProps: StatusProps = {
        variant: 'success',
        text: 'Pending Remixing',
    };

    const renderComponent = (customProps?: Partial<StatusProps>) => {
        const props = { ...defaultProps, ...customProps };

        return render(<Status {...props} />);
    };

    testComponent(Status);

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

    test('renders an unfilled success status', () => {
        const { getByTestId } = renderComponent();

        expect(getByTestId('Status')).toHaveClass('variant-success');
        expect(getByTestId('Status')).not.toHaveClass('filled');
        expect(getByTestId('CircleGlyphIcon')).toBeInTheDocument();
    });

    test('renders a filled revision status', () => {
        const { getByTestId } = renderComponent({
            variant: 'revision',
            filled: true,
        });

        expect(getByTestId('Status')).toHaveClass('variant-revision');
        expect(getByTestId('Status')).toHaveClass('filled');
        expect(getByTestId('DotGlyphIcon')).toBeInTheDocument();
    });

    describe('variant=loading', () => {
        test('renders a loading spinner', () => {
            const { getByTestId } = renderComponent({
                variant: 'loading',
            });

            expect(getByTestId('Status')).toHaveClass('variant-loading');
            expect(getByTestId('LoadingSpinner')).toBeInTheDocument();
        });
    });

    describe('size', () => {
        test('is `medium` by default', () => {
            const { getByTestId } = renderComponent({});

            expect(getByTestId('Status')).toHaveClass('size-medium');
            const dot = getByTestId('CircleGlyphIcon');
            expect(dot).toHaveAttribute('width', '16');
            expect(dot).toHaveAttribute('height', '16');
        });

        test('is `small` when set', () => {
            const { getByTestId } = renderComponent({ size: 'small' });

            expect(getByTestId('Status')).toHaveClass('size-small');
            const dot = getByTestId('CircleGlyphIcon');
            expect(dot).toHaveAttribute('width', '12');
            expect(dot).toHaveAttribute('height', '12');
        });

        test('shows `small` spinner when set', () => {
            const { container } = renderComponent({ variant: 'loading', size: 'small' });

            expect(container.getElementsByClassName('LoadingSpinner-inner').item(0)).toHaveClass(
                'size-12'
            );
        });
    });

    describe('children', () => {
        test('is added as subtext after the status text', () => {
            const content = 'Subtext';
            renderComponent({ children: content });

            expect(screen.getByText(content)).toBeInTheDocument();
            expect(screen.getByText(content)).toHaveClass('Status-subtext');
        });
    });

    describe('layoutVariant', () => {
        test('defaults to `inline`', () => {
            const { container } = renderComponent();

            const body = container.getElementsByClassName('Status-body').item(0);
            expect(body).toHaveClass('Status-inline');
        });

        test('can be set to `table`', () => {
            const { container } = renderComponent({ layoutVariant: 'table' });

            const body = container.getElementsByClassName('Status-body').item(0);
            expect(body).not.toHaveClass('Status-inline');
            expect(body).toHaveClass('Status-table');
        });
    });
});