import React from 'react';
import { render } from '@testing-library/react';
import { IdentityContext } from '@theorchard/suite-identity';
import { MemoryRouter } from 'react-router-dom';
import { mockContext } from '../../../__mocks__';
import { MainNavHeader, MainNavHeaderProps } from '../mainNavHeader';

vi.mock('@theorchard/suite-config', () => ({
    useAppConfig: () => mockContext.config,
}));

describe('<MainNavHeader>', () => {
    const renderComponent = (props: MainNavHeaderProps = {}) =>
        render(<MainNavHeader {...props} />, {
            wrapper: ({ children }) => (
                <IdentityContext.Provider value={{ identity: mockContext.identity }}>
                    <MemoryRouter>{children}</MemoryRouter>
                </IdentityContext.Provider>
            ),
        });

    test('renders', () => {
        const { container } = renderComponent({});
        expect(container).toMatchSnapshot();
    });

    test('renders app title and logo', () => {
        const { getByText, getByTestId, queryByText } = renderComponent({
            title: 'TestApp',
        });
        expect(getByText('TestApp')).toBeVisible();
        expect(getByTestId('PlaceholderAppIcon')).toBeVisible();
        expect(queryByText('BETA')).toBeNull();
    });

    test('renders as a regular link by default', () => {
        const { container } = renderComponent();
        const header = container.querySelector('.MainNavHeader-title');

        expect(header?.getAttribute('href')).toEqual('/');
    });

    test('renders as NavLink when asMainLink=true', () => {
        const { getByTestId, container } = renderComponent({ asMainLink: true, title: 'TestApp' });

        expect(getByTestId('NavLink')).toBeVisible();
        expect(getByTestId('PlaceholderAppIcon')).toBeVisible();

        expect(container.querySelector('.NavLink-icon')).toBeVisible();
        expect(container.querySelector('.NavLink-title')).toHaveTextContent('TestApp');
    });

    describe('with "beta" option', () => {
        test('renders beta label', () => {
            const { getByText } = renderComponent({ beta: true });
            expect(getByText('BETA')).toBeVisible();
        });
    });
});