import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import EmptyState from 'src/components/emptyState';
import {
    INTL_CLASSNAME,
    Pages,
    Props,
} from 'src/components/emptyState/emptyState';

describe('EmptyState', () => {
    const defaultProps: Props = {
        page: Pages.SONGS,
        isLoading: false,
    };

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

        return renderInAppContext(<EmptyState {...props} />);
    };

    test('Renders component with loading state', () => {
        const { container } = renderComponent({ isLoading: true });

        const header = container.querySelector('.EmptyState-header');
        expect(header).toBeVisible();
        const subHeader = container.querySelector('.EmptyState-sub-header');
        expect(subHeader).toBeNull();

        expect(
            screen.getAllByText($t(`${INTL_CLASSNAME}.songs.searching`))
        ).toHaveLength(1);
    });

    test('Renders component with empty non-loading state', () => {
        const { container } = renderComponent({ showSubHeader: false });

        const header = container.querySelector('.EmptyState-header');
        expect(header).toBeVisible();
        const subHeader = container.querySelector('.EmptyState-sub-header');
        expect(subHeader).toBeNull();

        expect(
            screen.getAllByText($t(`${INTL_CLASSNAME}.songs.noItems`))
        ).toHaveLength(1);
    });

    test('Renders component with empty non-loading state with sub header', () => {
        const { container } = renderComponent();

        const header = container.querySelector('.EmptyState-header');
        expect(header).toBeVisible();
        const subHeader = container.querySelector('.EmptyState-sub-header');
        expect(subHeader).toBeVisible();

        expect(
            screen.getAllByText($t(`${INTL_CLASSNAME}.songs.noItems`))
        ).toHaveLength(1);

        expect(
            screen.getAllByText($t(`${INTL_CLASSNAME}.songs.addByClickingNew`))
        ).toHaveLength(1);
    });
});