import React from 'react';
import { render } from '@testing-library/react';
import * as suiteIdentity from '@theorchard/suite-identity';
import * as suiteTheming from '@theorchard/suite-theming';
import { MemoryRouter } from 'react-router-dom';
import { mockIdentity, mockConfig, mockContext } from '../../../__mocks__';
import { MainNavFooter, Props } from '../mainNavFooter';

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

vi.mock('@theorchard/suite-auth', () => ({
    useAuthClient: () => ({}),
}));

vi.mock('@theorchard/suite-identity', async () => ({
    __esModule: true,
    ...(await vi.importActual('@theorchard/suite-identity')),
}));

vi.mock('../../../app/appContext', () => ({
    useAppContext: () => mockContext,
}));

vi.mock('../../../queries/zendeskToken', () => ({
    getZendeskAuthCallback: () => ({}),
}));

describe('<MainNavFooter>', () => {
    const renderComponent = (
        props: Partial<Props> = {},
        identityProps: Partial<suiteIdentity.Identity> = {}
    ) => {
        vi.spyOn(suiteIdentity, 'useIdentity').mockReturnValue({
            ...mockIdentity,
            ...identityProps,
        });

        return render(<MainNavFooter {...props} />, {
            wrapper: ({ children }) => <MemoryRouter>{children}</MemoryRouter>,
        });
    };

    test('renders default elements within the footer', () => {
        const { container, getByText, getByTestId, queryByTestId } = renderComponent();

        expect(container).toMatchSnapshot();
        expect(container.getElementsByClassName('NavLink')).toHaveLength(2);

        expect(getByTestId('AppSwitcher')).toBeInTheDocument();
        expect(queryByTestId('IntercomButton')).not.toBeInTheDocument();
        expect(queryByTestId('ZendeskButton')).not.toBeInTheDocument();
        expect(getByTestId('MainNavFooterUserButton')).toBeInTheDocument();
        expect(getByText('Mike Patton')).toBeInTheDocument();
    });

    test('does not render app switcher if disabled', () => {
        const { queryByTestId } = renderComponent({ enableAppSwitcher: false });

        expect(queryByTestId('AppSwitcher')).not.toBeInTheDocument();
    });

    test('renders intercom button if enabled', () => {
        const { getByTestId } = renderComponent({ enableIntercom: true });

        const intercomBtn = getByTestId('IntercomButton');

        expect(intercomBtn).toBeInTheDocument();
        expect(intercomBtn).toHaveTextContent('Help');
    });

    test('renders zendesk button if enabled', () => {
        vi.spyOn(suiteTheming, 'useTheme').mockReturnValue({
            theme: 'awal',
        } as suiteTheming.ThemeContextType);

        const { getByTestId } = renderComponent({ enableZendesk: true });

        const zendeskBtn = getByTestId('ZendeskButton');

        expect(zendeskBtn).toBeInTheDocument();
        expect(zendeskBtn).toHaveTextContent('Help');
    });

    test('renders extra items', () => {
        const { getByText } = renderComponent({
            items: [{ path: '/settings', title: 'link to settings' }],
        });

        const extraLink = getByText('link to settings');

        expect(extraLink).toBeInTheDocument();
    });
});