import React from 'react';
import { render } from '@testing-library/react';
import { IdentityContext } from '@theorchard/suite-identity';
import { mockConfig } from '../../../__mocks__';
import { MainNavLogo, MainNavLogoProps } from '../mainNavLogo';

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

const user = {
    name: 'Mike Patton',
    picture: 'some url',
    features: {},
};

describe('<MainNavLogo>', () => {
    const renderComponent = (props: MainNavLogoProps) =>
        render(
            <IdentityContext.Provider value={{ identity: user } as never}>
                <MainNavLogo {...props} />
            </IdentityContext.Provider>
        );

    describe('with no logo', () => {
        test('renders app icon', () => {
            const { container, getByTestId } = renderComponent({});
            expect(container).toMatchSnapshot();
            expect(getByTestId('PlaceholderAppIcon')).toBeVisible();
        });
    });

    describe('with logo element', () => {
        test('renders given logo', () => {
            const text = 'test';
            const { container, getByText } = renderComponent({
                logo: <div>{text}</div>,
            });
            expect(container).toMatchSnapshot();
            expect(getByText(text)).toBeVisible();
        });
    });

    describe('with logo component', () => {
        test('renders given logo', () => {
            const { container, getByText } = renderComponent({
                logo: ({ brand }) => <div>{brand}</div>,
            });
            expect(container).toMatchSnapshot();
            expect(getByText(mockConfig.brand)).toBeVisible();
        });

        test('logo is given identity', () => {
            const { getByText } = renderComponent({
                logo: ({ identity }) => <div>{identity?.name}</div>,
            });
            expect(getByText(user.name)).toBeVisible();
        });
    });
});