import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import * as suiteFrontend from '@theorchard/suite-frontend';
import * as suiteTheming from '@theorchard/suite-theming';
import { mockAppConfig } from 'lib/test-helpers/factories';
import { createIdentity } from 'lib/test-utils/identity-factory';
import IdentityContext from 'src/context';
import ZendeskButton, { NO_ZENDESK_KEY_MSG } from '../zendesk-button';

jest.mock('@theorchard/suite-frontend', () => ({
    ...jest.requireActual('@theorchard/suite-frontend'),
    useAppConfig: jest.fn(),
}));

jest.mock('@theorchard/suite-theming', () => ({
    ...jest.requireActual('@theorchard/suite-theming'),
    useTheme: jest.fn(() => ({ theme: 'default' })),
}));

const renderComponent = (identity: ReturnType<typeof createIdentity>) =>
    render(
        <IdentityContext.Provider
            value={{ identity, hasAuthentication: () => false }}
        >
            <ZendeskButton />
        </IdentityContext.Provider>
    );

describe('<ZendeskButton />', () => {
    afterEach(() => {
        jest.restoreAllMocks();
    });

    describe('renders the component', () => {
        const identity = createIdentity({ id: 1 });

        beforeEach(() => {
            jest.spyOn(console, 'warn').mockImplementation();
            jest.mocked(suiteTheming.useTheme).mockReturnValue({
                theme: 'default',
                setTheme: jest.fn(),
            });
        });

        test('it renders correctly', () => {
            jest.spyOn(suiteFrontend, 'useAppConfig').mockReturnValue({
                ...mockAppConfig,
                zendeskKey: 'abc123',
            });

            const { container } = renderComponent(identity);
            const button = container.querySelector('#zendeskButton');

            expect(button).toBeInTheDocument();
            expect(button).toHaveClass('zE-Closed');
        });

        test('it wont render if theres no zendeskKey at the config', () => {
            jest.spyOn(suiteFrontend, 'useAppConfig').mockReturnValue(
                mockAppConfig
            );

            const { container } = renderComponent(identity);
            const button = container.querySelector('#zendeskButton');

            expect(button).toBeNull();
            // eslint-disable-next-line no-console
            expect(console.warn).toHaveBeenCalledWith(NO_ZENDESK_KEY_MSG);
        });
    });

    describe('on button click', () => {
        const zE = jest.fn();
        const identity = createIdentity({ id: 1 });

        beforeEach(() => {
            window.zE = zE;
            zE.mockClear();

            jest.spyOn(suiteFrontend, 'useAppConfig').mockReturnValue({
                ...mockAppConfig,
                brand: 'awal',
                zendeskKey: 'abc123',
            });

            jest.spyOn(suiteTheming, 'useTheme').mockReturnValue({
                theme: 'awal',
                setTheme: jest.fn(),
            });
        });

        test('it will call updateSettings with required calls', () => {
            const { container } = renderComponent(identity);
            const button = container.querySelector('#zendeskButton');

            if (button) fireEvent.click(button);

            expect(window.zE).toHaveBeenCalledWith('webWidget', 'show');
            expect(window.zE).toHaveBeenCalledWith('webWidget', 'toggle');

            expect(window.zE).toHaveBeenCalledWith(
                'webWidget',
                'updateSettings',
                {
                    webWidget: {
                        answerBot: {
                            suppress: true,
                        },
                    },
                }
            );
            expect(window.zE).toHaveBeenCalledWith(
                'webWidget',
                'helpCenter:setSuggestions',
                {
                    search: 'workstation',
                }
            );
            expect(window.zE).toHaveBeenCalledWith(
                'webWidget',
                'updateSettings',
                {
                    webWidget: {
                        color: {
                            articleLinks: '#3A1C40',
                            button: '#7B3A88',
                            header: '#3A1C40',
                            resultLists: '#B069BF',
                        },
                    },
                }
            );
        });
    });
});